Real-time WCAG contrast ratio calculator with AA/AAA accessibility compliance checking. Make your designs accessible to everyone.
1. Relative Luminance L = 0.2126*R + 0.7152*G + 0.0722*B
2. Channel value: If RsRGB ≤ 0.03928, R = RsRGB/12.92, otherwise R = ((RsRGB+0.055)/1.055)^2.4
3. Contrast Ratio = (L_lighter + 0.05) / (L_darker + 0.05)
WCAG (Web Content Accessibility Guidelines) is an international standard developed by W3C that defines minimum contrast ratio requirements between foreground and background colors. The contrast ratio ranges from 1:1 (no contrast) to 21:1 (maximum contrast between black and white). Higher ratios mean better readability. Good color contrast not only helps visually impaired and color-blind users read content, but also improves the reading experience for everyone in bright light environments.
| Level | Text Type | Minimum Contrast |
|---|---|---|
| AA | Normal text (<18pt or <14pt bold) | 4.5 : 1 |
| AA | Large text (≥18pt or ≥14pt bold) | 3 : 1 |
| AAA | Normal text | 7 : 1 |
| AAA | Large text | 4.5 : 1 |
| AA | UI components and graphics (icons, borders, etc.) | 3 : 1 |
WCAG color contrast refers to the luminance difference ratio between foreground (text) and background colors, ranging from 1:1 to 21:1. It is a core metric defined in the W3C Web Content Accessibility Guidelines to measure text readability. Higher ratios mean text is easier to distinguish, which is more friendly to visually impaired and color-blind users.
AA is the basic WCAG compliance level, requiring normal text contrast of at least 4.5:1 and large text of at least 3:1. It is the minimum standard most websites should achieve. AAA is a stricter enhanced level, requiring normal text of at least 7:1 and large text of at least 4.5:1, suitable for scenarios with high accessibility requirements (such as government websites and healthcare platforms). AA is the recommended baseline target; AAA is not a universal requirement for all content.
WCAG defines large text as: regular text with font size of at least 18pt (approximately 24px), or bold text with font size of at least 14pt (approximately 18.5px). Because large text has more area and thicker strokes, the contrast requirement is relatively lower, so the AA standard only requires 3:1 instead of 4.5:1.
The 4.5:1 value is based on research involving individuals with visual acuity of approximately 20/40 (about 0.5 vision). Studies show that when contrast reaches 4.5:1, users with 20/40 vision or better can generally read text content normally. This standard balances accessibility needs with design flexibility, and is the best practice value determined by W3C after extensive scientific validation.
The most direct approach is to adjust color luminance: if the text is too light, darken it (lower RGB values); if the background is too dark, lighten it (raise RGB values). This tool automatically recommends AA-compliant alternative colors when non-compliance is detected — just click to apply. Alternatively, you can try black-and-white combinations (21:1 maximum contrast) as a safe option, or use the "Random Colors" feature to explore compliant combinations.