About Color contrast checker conversion
Low-contrast text is one of the most common accessibility failures on the web, and it hurts everyone reading in bright sunlight, not just people with low vision. The Web Content Accessibility Guidelines measure legibility with a contrast ratio from 1:1 (no contrast) to 21:1 (black on white). Level AA asks for at least 4.5:1 for normal body text and 3:1 for large text and essential interface graphics; level AAA raises body text to 7:1.
Enter a hex code or pick a color and the checker reports its ratio on a white background and on a black background, calculated from relative luminance exactly as WCAG defines it. That answers the most frequent design question — can I put this brand color on white, or does it need a dark background, or should text on top of it be white or black?
The tool compares only against pure white and pure black. To test two arbitrary colors, such as a gray on a beige panel, you will need a dedicated two-color checker. Click a tint or shade to quickly find a darker or lighter variant of your color that passes.
How to do it
- Open the Color tool from the button above.
- Type your text or background color as a hex code.
- Scroll to Contrast ratio and read the On white and On black values.
- Compare against 4.5:1 for body text or 3:1 for large text and icons.
- If it falls short, click a darker shade or lighter tint and check again.
