Color Contrast Checker - WCAG Accessibility
Test foreground and background color combinations for WCAG 2.1 accessibility compliance. Check AA and AAA contrast ratios in real time.
Sample Text - Large (Bold)
Sample text - Normal size. This is how your color combination looks.
Small text example for detailed reading.
Common Combinations
WCAG 2.1 Contrast Standards
| Level | Text Type | Minimum Ratio |
|---|---|---|
| AA (Minimum) | Normal text (under 18pt / 14pt bold) | 4.5:1 |
| AA (Minimum) | Large text (18pt+ / 14pt+ bold) | 3.0:1 |
| AAA (Enhanced) | Normal text | 7.0:1 |
| AAA (Enhanced) | Large text | 4.5:1 |
WCAG AA is the legal standard in many jurisdictions. WCAG AAA is the recommended best practice for maximum accessibility.
Where Contrast Usually Fails
Contrast problems often appear in secondary text, disabled buttons, badges, captions, and text placed on bright photos. A headline might pass because it is large and bold, while the small description below it fails at the same colors.
| Element | Target | Practical fix |
|---|---|---|
| Body text | AA normal, 4.5:1 | Use a darker text color or a lighter background. |
| Large headings | AA large, 3:1 | Still test them if they sit on images or gradients. |
| Buttons | 4.5:1 for button text | Check hover and disabled states separately. |
| Image overlays | 4.5:1 for readable text | Add a solid overlay or move the text to a quieter area. |
In GIMP, use this checker before exporting web graphics with text. If text is baked into an image, screen readers cannot repair poor contrast later.
Which Ratio Do You Actually Need?
WCAG sets different minimums depending on what the color pair is used for. Check your use case below, then test the pair in the checker above.
| Element | AA minimum | AAA minimum |
|---|---|---|
| Body text (under 18pt / 24px) | 4.5:1 | 7:1 |
| Large text (18pt+ or 14pt bold) | 3:1 | 4.5:1 |
| Buttons, icons, form borders (UI components) | 3:1 | No AAA rule |
| Charts and infographic colors | 3:1 against adjacent colors | No AAA rule |
| Logos and decorative elements | Exempt | Exempt |
How to Fix a Failing Pair
- 1.Darken the text, not the background. Small lightness changes in dark colors move the ratio faster than changes in light colors. Dropping a mid-gray text color two shades often takes a 3.8:1 pair past 4.5:1.
- 2.Keep the hue, change the lightness. Contrast only measures luminance. You can keep your exact brand hue and still pass by adjusting lightness in HSL.
- 3.Never rely on color alone. Pair color cues with icons, labels, or underlines so color-blind users get the same information. Test your design in the color blindness simulator.
- 4.Extract palette colors from images first. If your colors come from a photo or logo, pull the exact hex values with the color palette generator, then test them here.
Related Tutorial
Improve contrast, fix white balance, and apply color grading techniques step by step in GIMP.