WCAG Color Contrast Checker & Calculator

1. What This Tool Actually Calculates

This checker converts your two hex colors into sRGB channels, applies the WCAG gamma-correction curve to derive each color's relative luminance, and then computes the contrast ratio using the official formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter of the two relative luminances and L2 is the darker. The result is a single number between 1:1 (identical colors, zero contrast) and 21:1 (pure black on pure white, maximum contrast).

That single ratio is then checked against four separate thresholds simultaneously — normal text AA, normal text AAA, large text AA, and non-text UI components AA — because a color pair can pass one threshold while failing another. A ratio of 3.5:1, for instance, is perfectly compliant for a large heading but fails for 14px body copy.

2. How to Use the Contrast Checker

1. Enter your text (foreground) color as a hex value, or click the color swatch to open the native color picker.
2. Enter your background color the same way, or select one of the sample combinations to instantly load a real-world pairing.
3. Read the calculated ratio in the scorecard — it updates live with every keystroke, with no page reload or server round trip.
4. Check the four pass/fail badges: Normal Text AA, Normal Text AAA, Large Text AA, and UI Components AA — each reflects a distinct WCAG threshold.
5. Use the "Swap" button to instantly test the reverse pairing (useful for checking both light-on-dark and dark-on-light variants of the same two brand colors).
6. Scroll to the live preview to see how the pairing actually renders as a heading, paragraph, button, and badge — a ratio can technically pass while still looking uncomfortable in real typography.

3. The WCAG Success Criteria Involved

Three distinct WCAG success criteria govern color contrast, and this tool checks all of them at once:

• 1.4.3 Contrast (Minimum) — Level AA: Normal text must reach at least 4.5:1; large text (≥18pt, or ≥14pt bold) must reach at least 3:1.
• 1.4.6 Contrast (Enhanced) — Level AAA: A stricter, optional criterion requiring 7:1 for normal text and 4.5:1 for large text. Few commercial sites target full AAA site-wide, but it is often applied to specific high-priority reading content.
• 1.4.11 Non-text Contrast — Level AA: Introduced in WCAG 2.1, this requires a 3:1 ratio for the visual boundaries of UI components (input borders, checkbox outlines, active states) and for graphical objects required to understand content (icons, chart lines), measured against their immediately adjacent color.

Logos, purely decorative graphics, and text that is part of an inactive/disabled control are explicitly exempted from 1.4.3, though disabled-state contrast is still good practice for usability.

4. A Worked Example

Load the tool's default pairing: white text (#FFFFFF) on a near-black background (#0D0E10). Running both hex values through the relative-luminance formula gives L1 = 1.0 (white) and L2 ≈ 0.00437 (near-black), producing a ratio of (1.0 + 0.05) / (0.00437 + 0.05) ≈ 19.31:1.

That comfortably clears every threshold at once: 4.5:1 (normal AA), 7:1 (normal AAA), 3:1 (large AA/AAA), and 3:1 (UI components) — which is why high-contrast dark themes are a common, low-risk default for text-heavy interfaces. Compare that to the "Subtle Muted Text" preset (#71767B on #000000), which lands closer to 4.6:1 — technically a pass for normal-text AA, but with almost no margin, meaning a slightly darker gray or a slightly-off black background could tip it into failure.

5. Who Actually Uses This Tool

• Digital agencies running ADA/Section 508 audits: quickly verify every color pair in a client's brand palette (body text, links, buttons, badges) before delivering a remediation report.
• WordPress theme and page-builder developers: validate default theme color combinations (Elementor global colors, Gutenberg palette entries) so end users don't unknowingly ship inaccessible defaults.
• Government and education site owners: confirm Section 508 / EN 301 549 conformance for civic and .edu portals where accessibility is often a procurement requirement, not just best practice.
• Product and UI designers: stress-test a design system's semantic colors (success green, warning amber, error red) against both light and dark surface tokens before they ship to engineering.

6. Common Mistakes & Limitations

• Testing against the wrong background: if text sits over an image, gradient, or semi-transparent overlay, a single flat-color check isn't sufficient — the darkest and lightest regions of the background both need to be tested.
• Ignoring hover/focus/disabled states: a button that passes in its default state can fail once a hover overlay or opacity reduction is applied.
• Confusing "large text" thresholds: 18px bold body copy does not automatically qualify as "large text" — the WCAG threshold is 14pt bold (~18.66px), and font-weight matters as much as size.
• Treating a pass as a full accessibility clearance: this tool checks one criterion in isolation. A page can have perfect contrast ratios everywhere and still fail on missing alt text, broken heading order, or unlabelled form fields — all of which need their own dedicated checks.