How to Check Color Contrast for WCAG Accessibility
Test foreground and background color combinations against WCAG 2.1 contrast requirements with our free Color Contrast Checker.
Steps
Enter the foreground (text) colour
Enter the colour of your text in HEX, RGB, or HSL format, or use the colour picker. This is the colour of the text, icon, or UI element that users need to read or perceive.
Enter the background colour
Enter the colour of the background behind your text. For elements on a gradient or image background, test against the lightest and darkest parts of the background separately and use the worst-case result.
Read the contrast ratio
The tool calculates the contrast ratio as a number like 4.5:1 or 7:1. A higher number means more contrast. The ratio is calculated using the WCAG relative luminance formula, which accounts for how human eyes perceive different colours (we are more sensitive to green than blue).
Check against WCAG standards
WCAG 2.1 Level AA (the most common legal requirement) requires: normal text (under 18pt or 14pt bold): 4.5:1 minimum. Large text (18pt+ or 14pt+ bold): 3:1 minimum. UI components and graphics: 3:1. WCAG Level AAA (enhanced): 7:1 for normal text, 4.5:1 for large text.
Adjust colours if failing
If the combination fails, use the suggestion feature to find the nearest compliant colour. Or adjust the darker colour to be darker and the lighter colour to be lighter until the ratio reaches the required threshold.
Understanding Colour Contrast Ratios
The WCAG contrast ratio is calculated from the relative luminance of two colours. Relative luminance accounts for the non-linear way human eyes perceive brightness — the formula weights green heavily (0.7152), red moderately (0.2126), and blue lightly (0.0722) because our eyes have more green-sensitive cones. The contrast ratio formula is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter colour's luminance and L2 is the darker colour's luminance. This produces a ratio from 1:1 (no contrast, both colours identical) to 21:1 (maximum contrast, black on white). The seemingly arbitrary thresholds of 4.5:1 and 3:1 were chosen based on research into the contrast needs of people with 20/80 vision — approximately 40% of the normal contrast of perfect 20/20 vision.
Building an Accessible Colour Palette
Rather than checking contrast ad hoc, build accessibility into your design system's colour palette from the start. Define colour pairs — text colour + background colour — and verify each combination meets WCAG AA at minimum. Common approach: define your brand colours as base hues, then create a range of lightness values (100, 200, 300, 400, 500, 600, 700, 800, 900) and verify which combinations pass. Document the passing combinations in your design system so designers and developers always know which pairings are safe to use. Tools like Tailwind CSS's colour palette are designed with accessible contrast in mind. A well-documented colour palette with contrast-checked pairs eliminates most accessibility review comments about colour contrast.
Frequently Asked Questions
WCAG (Web Content Accessibility Guidelines) is the international standard for web accessibility published by the W3C. It defines how to make web content accessible to people with disabilities. Colour contrast requirements specifically address users with low vision and colour vision deficiency (colour blindness affects approximately 8% of men and 0.5% of women). Beyond ethical responsibility, WCAG compliance is required by law in many jurisdictions: Section 508 in the US federal sector, EN 301 549 in the EU, the UK Equality Act, and the Accessibility for Ontarians with Disabilities Act in Canada. Websites failing WCAG have faced legal action.
Yes. WCAG 1.4.3 applies to all text that conveys information, including placeholder text in form inputs. Placeholder text typically fails contrast requirements because designers use light grey to indicate it is placeholder — this is actually an accessibility violation. Use a colour of at least 4.5:1 contrast against the input background for placeholder text. To visually distinguish placeholder from user-entered text, use italic styling rather than a lighter colour.
WCAG requires that text meets contrast requirements against whatever is immediately behind it. For text on images, the worst-case background colour in the area where text appears must meet the contrast threshold. In practice, this means: use solid-colour text boxes or semi-transparent overlays, not text directly on complex images. For text on gradients, test against both the lightest and darkest parts of the gradient and ensure both pass.