Random AA Contrast Color Generator

WCAG AA accessible color pairs explained

The Web Content Accessibility Guidelines (WCAG) are the de facto international standard for accessible web content, maintained by the W3C through the Web Accessibility Initiative (WAI). Version WCAG 2.1 (published 2018) defines three conformance levels: A (minimum, rarely sufficient on its own), AA (the level most laws actually require), and AAA (gold standard for safety-critical content). This generator picks a random foreground/background pair that passes the 1.4.3 Contrast (Minimum) success criterion for AA — meaning the pair is legible for the vast majority of users, including those with moderate low-vision or aging eyes.

Contrast ratio thresholds

• AA normal text (below 18pt or 14pt bold): 4.5:1
• AA large text (18pt+ or 14pt+ bold): 3:1
• AAA normal text (criterion 1.4.6): 7:1
• AAA large text: 4.5:1
• UI components and graphical objects (1.4.11 Non-text Contrast): 3:1 for borders, icons and focus rings

How the ratio is calculated

First the sRGB channels are linearised via a gamma curve — roughly pow((c+0.055)/1.055, 2.4) for values above 0.03928. Then relative luminance is the weighted sum L = 0.2126·R + 0.7152·G + 0.0722·B, with green dominating because the human eye is most sensitive to it. The contrast ratio is finally (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter of the two values. Ratios go from 1:1 (identical colors) to 21:1 (pure black on pure white).

Laws that require accessible contrast

• Brazil — Lei Brasileira de Inclusão (Lei 13.146/2015) makes web accessibility mandatory for public services and references WCAG via eMAG.
• USA — Section 508 of the Rehabilitation Act forces federal sites and contractors to meet WCAG 2.0 AA.
• European Union — European Accessibility Act (EAA) applies to private digital services since June 2025; e-commerce, banking and streaming must meet EN 301 549 (which references WCAG AA).
• Title III of the ADA (US) has been used in thousands of lawsuits against inaccessible commercial sites since the Domino's Pizza ruling.

Tools and what's next: APCA

Popular checkers include the WebAIM Color Contrast Checker, the Stark plugin for Figma/Sketch, Chrome DevTools (the color picker shows the ratio inline), and Color Oracle for color blindness simulation. The current luminance formula has known issues with dark mode and middle tones, so the W3C is evaluating APCA (Advanced Perceptual Contrast Algorithm) for inclusion in WCAG 3.0. APCA produces a polarity-aware Lc value (typical body text needs Lc 75+) and handles dark backgrounds much more accurately than the 2.x ratio.

Practical tips

• Never rely on color alone to convey information — pair it with icons or text (criterion 1.4.1).
• For dark mode, do not just invert hues; recompute each pair against the dark background.
• Gradient text rarely passes contrast for every pixel — fall back to a solid color for the worst-contrast region.
• Tailwind's text-gray-900 on bg-white sits at 16:1 — comfortably AAA.

FAQ

Is AA enough? Yes for the majority of consumer products — and for almost all legal compliance frameworks worldwide.

When should I aim for AAA? Medical, financial, government and educational content used by older or low-vision audiences should target AAA where possible.

What counts as large text? 18pt or larger, or 14pt bold — for body copy you must use the 4.5:1 threshold, not the 3:1 one.

Why do my colors fail in dark mode? The classic WCAG formula under-estimates contrast on dark backgrounds — recheck with APCA or visually proof on a real OLED display.