How to Check Text and Background Color Contrast (WCAG)
On this page
Short answer: open Imgovo’s Color Palette from Image, open the Contrast tab, choose a text color and a background color, and read the WCAG 2.2 result. A ratio of 4.5:1 passes AA for normal text, 3:1 passes AA for large text, and 7:1 passes AAA for normal text. You can build the colors from a photo or type your own HEX codes. Nothing is uploaded.
What contrast ratio means
The contrast ratio compares how light two colors are. It runs from 1:1 (identical colors) to 21:1 (black on white). Text with too little contrast is hard to read, especially for people with low vision, on a phone in sunlight, or on a poor screen.
The numbers to remember
| Level | Normal text | Large text | Interface parts and icons |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | – |
Large text means at least 24 px, or 18.66 px if bold.
Step by step
- Open Color Palette from Image. Add an image to build a palette, or use Build a palette without an image.
- Open the Contrast tab.
- Choose the Text color and the Background color from your palette or enter your own.
- Look at the samples (large and normal text) and the WCAG 2.2 results for this pair: the ratio and a pass or fail for AA and AAA.
- If the pair fails, click Suggest a readable text color, then Use suggestion.
- Use Swap to try light text on a dark background and the reverse. Open All pairs to see every combination in the palette.
Colors from a photo
If you extracted a palette from a photo, do not assume it works for text. Soft or similar colors often fail. Pick a dark swatch for text and a light one for the background, or the other way round, and test the pair. For how to build the palette, see How to get a color palette from an image.
See how others may see the palette
The tool also shows an approximation of common color-vision differences. It helps you notice colors that look alike for some people. It is not a contrast test and not a medical tool.
Try the colors in an interface
The Preview tab shows your colors in a small page layout with a page, a card, text, an accent and a border, so you see them in context before you copy the codes into your CSS.
Limits
The checker measures one pair of solid colors at a time. It does not test photos behind text, gradients, hover states or the rest of accessibility. Treat the result as a helpful check, not as a certificate.
Privacy
The colors are checked in your browser. Nothing is uploaded.
Try it now
Open Color Palette from Image, go to Contrast and test your text and background colors.
Frequently asked questions
What contrast ratio do I need?
WCAG 2.2 asks for at least 4.5:1 for normal text and 3:1 for large text at level AA. Level AAA asks for 7:1 for normal text and 4.5:1 for large text. Interface parts and icons need 3:1.
What counts as large text?
At least 24 px, or 18.66 px if bold.
Is this a certificate that my design is accessible?
No. The checker measures one pair of solid colors. It is not a certificate for a whole design, and it does not test images, gradients, text on photos or the other parts of accessibility.
Can Imgovo suggest a readable text color?
Yes. Choose a background color and use Suggest a readable text color. You can then use the suggestion or keep your own.
Can I check all colors of a palette at once?
Yes. The All pairs view lists every text and background pair of your palette with its result.
Is my image uploaded?
No. The colors are checked in your browser, and nothing leaves your device.