What is Color Contrast?
Color contrast measures the difference in relative luminance between two colors — typically a text color and its background. A higher contrast ratio means the text is easier to read. The Web Content Accessibility Guidelines (WCAG) define minimum ratios that websites should meet.
Understanding WCAG 2.1 Contrast Levels
- Level AA (Minimum): Requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). This is the legal requirement in many countries.
- Level AAA (Enhanced): Requires 7:1 for normal text and 4.5:1 for large text. Recommended for high-accessibility sites like government portals.
Most Common Contrast Mistakes
- Light gray text (
#999) on white backgrounds — very popular but often fails AA. - Yellow or orange text on white backgrounds.
- Text placed over busy images without a dark overlay.
- Colored buttons where both the text and background are mid-tone colors.
How to Use the Color Contrast Checker
1Enter your Foreground (text) color as a HEX code, or click the color swatch to use the visual picker.
2Enter your Background color the same way.
3The tool instantly shows the contrast ratio and whether it passes WCAG AA and AAA.
4Use the live preview to see how your text actually looks on the background.
💡 Design Tip: If your colors fail the check, try darkening the foreground color or lightening the background by just 5–10%. Small adjustments can flip a "Fail" to a "Pass" without visually changing your design significantly.
Why Accessibility Matters
- Approximately 1 in 12 men and 1 in 200 women have some form of color blindness.
- Low vision affects hundreds of millions of people globally.
- Poor contrast also hurts all users in bright sunlight or on low-brightness screens.
- WCAG compliance is legally required in many jurisdictions (EU, USA's ADA, etc.).
FAQ
Does contrast ratio apply to images?
WCAG contrast requirements apply to text over a colored background. For text overlaid on images, there's no automatic pass — you must ensure the text area has sufficient contrast using overlays or semi-transparent backgrounds.
What is the best black-and-white contrast ratio?
Black text on white (#000 on #fff) achieves the maximum ratio of 21:1. It always passes all WCAG levels.