Pick a text color and a background color to see the WCAG contrast ratio, whether it passes AA and AAA, and a nearby color that would pass if it does not.
The quick brown fox jumps over the lazy dog
Body text at 16px. Good contrast keeps long paragraphs comfortable to read for everyone, including people with low vision or anyone reading on a phone in bright sunlight.
Button labelThe contrast ratio compares the relative brightness (luminance) of two colors on a scale from 1:1 (identical) to 21:1 (black on white). The Web Content Accessibility Guidelines (WCAG) set minimum ratios so text stays readable for people with low vision, color blindness or a dim screen.
| Content | Level AA | Level AAA |
|---|---|---|
| Normal text (under 18pt / 24px) | 4.5 : 1 | 7 : 1 |
| Large text (18pt / 24px, or 14pt / 18.66px bold) | 3 : 1 | 4.5 : 1 |
| Icons, input borders, focus rings | 3 : 1 | — |
AA is the level most laws and company policies require (for example the European Accessibility Act and the ADA in practice). AAA is a stricter target that is worth reaching for body text on long-form pages.
Each color is converted to relative luminance using the sRGB formula from WCAG 2.2, then the ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. The result is the same no matter which color is text and which is background.
Yes. A semi-transparent text color mixes with whatever is behind it, so check the final, blended color. Pick it with your browser's color picker on the rendered page and paste the hex value here.
It is the minimum. Very thin or small fonts can still be hard to read at 4.5:1, so give light font weights more contrast than the minimum.
Need colors to test? Generate a palette with the Color Palette Generator — every swatch shows its contrast with white or black text.