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.