How to use
- 1Choose a text (foreground) color and a background color.
- 2Read the contrast ratio and the AA/AAA pass or fail results.
- 3Check the live sample of normal and large text.
- 4If it fails, use “suggest” to get the closest color that passes.
WCAG contrast requirements
WCAG 2.x level AA (the usual legal and corporate target) requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 and 4.5:1. Large text means at least 18pt (24 px) regular or 14pt (about 18.7 px) bold. Icons, form field borders and other meaningful UI graphics need 3:1 against adjacent colors (WCAG 1.4.11). Ratios range from 1:1 (same color) to 21:1 (black on white).
Why contrast compliance matters
Low contrast is the single most common accessibility failure on the web, found on the large majority of homepages in annual audits. It affects people with low vision and color blindness, and everyone reading a phone in sunlight. In the EU, the European Accessibility Act has applied to many consumer websites and online shops since June 2025, and in the US, accessibility lawsuits under the ADA routinely cite WCAG 2.1 AA.
Fixing a failing pair
Darken the text rather than the background in most cases — it preserves your brand background. Light gray body text (#999 on white is only 2.8:1) is the classic failure; #767676 is the lightest gray that passes AA on white. Brand colors like bright yellow or light green rarely pass with white text — use them with dark text instead. The suggest button finds the nearest color with the same hue that meets the target.
Frequently asked questions
What contrast ratio do I need?
4.5:1 for normal body text and 3:1 for large text to meet WCAG AA. Aim for 7:1 on long-form reading text if you can.
Does placeholder or disabled text need to pass?
Placeholder text should meet 4.5:1 since users need to read it. Disabled controls are exempt under WCAG.
How is the contrast ratio calculated?
From the relative luminance of the two colors: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. Hue doesn’t matter — only luminance.
What about WCAG 3 and APCA?
APCA is a newer contrast model proposed for the future WCAG 3, which is still a draft. WCAG 2.x ratios remain the standard for compliance.
Not happy with the results?
Talk to Webin Agency about fast, SEO-friendly websites, e-commerce and Google Ads management.