Color Contrast Checker
Calculate accurate luminance contrast ratios between text and background colors according to official W3C accessibility guidelines.
Normal Text (≥ 4.5:1)
Body copy below 18pt
Large Text (≥ 3.0:1)
Headings & text above 18pt
AAA Enhanced (≥ 7.0:1)
Highest accessibility standard
UI Elements (≥ 3.0:1)
Input borders, buttons, icons
The quick brown fox jumps over the lazy dog.
Good contrast makes user interfaces legible, accessible, and comfortable to read for all users, including individuals with low vision or color vision deficiencies.
Understanding WCAG 2.1 Standards
Requires a 4.5:1 ratio for regular text (under 18pt) and a 3.0:1 ratio for large/bold text (18pt+ or 14pt bold).
Requires a strict 7.0:1 ratio for normal text and 4.5:1 for large text. Essential for high readability standards.
Active user interface elements, borders, and graphical indicators must meet at least a 3.0:1 contrast ratio.
Frequently Asked Questions
How is the contrast ratio calculated?
Contrast is measured by computing the relative luminance (perceived brightness) of both colors and calculating the formula (L1 + 0.05) / (L2 + 0.05), ranging from 1:1 (lowest) to 21:1 (pure black on pure white).
Does this checker work offline?
Yes! All color calculations run entirely inside your browser using mathematical formulas with 0 network latency.