Accessibility tool

WCAG color contrast checker

Test text and background colors for WCAG AA and AAA contrast. Everything runs locally in your browser.

Colors


Contrast ratio
—
Readable?

This is a live text sample using your selected foreground and background colors.

Normal text
WCAG AA
—
Large text
WCAG AA
—
Normal text
WCAG AAA
—
Large text
WCAG AAA
—

What contrast ratios should a Bootstrap theme target?

For ordinary text, WCAG AA generally requires a contrast ratio of at least 4.5:1. Large text can pass AA at 3:1. AAA raises those targets to 7:1 for normal text and 4.5:1 for large text.

Use the checker for buttons, links, alerts, badges and any custom Bootstrap color pair. The main Theme Studio can also choose black or white foreground text automatically based on the better contrast ratio.

Keep BootstrapColors free

If this tool saves you time, you can support the project.

BootstrapColors is free and does not lock downloads behind a payment. Some people use it once; others come back many times. If it is useful in your work, a contribution helps with hosting, maintenance and future improvements.

$20 remains a suggested general contribution — it is not the price of one theme.