WCAG Contrast Checker
Ensure web design accessibility. Compare relative luminance values of colors to satisfy WCAG AA & AAA readability rules.
Color Selections
Lorem Ipsum Title (Large Text)
This is a live preview paragraph for normal-sized text. Standard web components like body text, descriptions, and lists must meet 4.5:1 ratio contrast goals under standard guidelines.
WCAG Verification Checklist
Understanding Web Accessibility & Contrast Ratios
Web accessibility is a core aspect of modern site engineering, ensuring content is usable and readable for people with visual impairments, color blindness, or situational reading challenges. Contrast ratio checks verify the brightness difference between the text color (foreground) and the behind element background container.
WCAG AA vs. AAA Standards
The Web Content Accessibility Guidelines (WCAG) specify two levels of contrast verification: AA and AAA. Level AA represents the standard requirement for most web pages, requiring a 4.5:1 ratio for normal body text and 3:1 for large headers. Level AAA represents the highest accessibility goal, demanding a 7:1 ratio for body copy and 4.5:1 for headers.
Relative Luminance Calculation
Luminance values represent the perceived brightness of a color relative to pure white. It is calculated by normalizing sRGB channels and weighing them according to human spectral sensitivity (green contributes most, blue least). The contrast ratio is then defined as `(L1 + 0.05) / (L2 + 0.05)`, yielding a score from 1:1 (no contrast) up to 21:1 (maximum contrast).