WCAG Contrast & Accessibility Matrix

Overview

Calculates WCAG contrast ratios with a verdict in plain language, a color-coded score, a live preview including a button-style interactive element, and a four-card compliance matrix that adds the UI-components criterion. Pick two colors, see every threshold your pair passes or fails.

How It Works

Set foreground and background colors with the pickers or hex text fields. The central card shows the ratio to two decimals in green, amber or red according to severity, with a sentence verdict: exceptional (all AAA), great (AA), medium (large text and UI only) or poor. The preview panel renders normal 14px text, a large heading and a primary button in your pair, so interactive-element legibility is visible alongside paragraphs. The matrix below grades WCAG AA Normal (4.5:1), AA Large (3.0:1), AAA Normal (7.0:1) and UI Graphics and Inputs (3.0:1) with explicit targets and pass/fail chips.

Step-by-Step Usage Guide

1. Enter the text color and the background color via pickers or hex fields.
2. Read the ratio, its color coding and the plain-language verdict.
3. Check the button in the preview — if the pair only passes at 3:1, interactive elements are at the edge of legality.
4. Confirm which of the four matrix cards you need: text sizes map to AA/AAA normal or large; controls map to the UI card.

Technical Specifications & Standards

The engine implements WCAG's relative luminance exactly: per-channel sRGB linearisation (the 0.04045 cutover between the linear and power curves), luminance weights 0.2126/0.7152/0.0722, and the (L1 + 0.05) / (L2 + 0.05) ratio with the 0.05 glare offset. Its differentiator is the fourth card: UI Graphics and Inputs at 3.0:1 is WCAG 2.1 success criterion 1.4.11 (non-text contrast), which requires the visual boundaries of controls and meaningful graphics to clear 3:1 — a check most text-only contrast tools omit, and the reason the preview includes a button rather than only paragraphs of text. The verdict tiers map the same numbers onto decisions: at 7:1 and above every criterion passes; 4.5:1 to 6.99 covers all text at AA but not AAA body text; 3:1 to 4.49 leaves large text and non-text elements only; below 3:1 the pair fails everything. Both pickers and text inputs accept the value, and three-digit hex is expanded internally, so pasted design tokens work as-is.

Targeted Use Cases

• Auditing a design system's button and text colors against both text (1.4.3) and non-text (1.4.11) contrast criteria.
• Checking dark-mode pairs, where saturated accent-on-dark combinations frequently land between 3:1 and 4.5:1.
• Producing an accessibility report with explicit ratios and criterion-by-criterion pass/fail evidence.
• Deciding whether a muted secondary text color is acceptable at its intended size, or must be darkened.

Notes & Gotchas

• Treat the UI Graphics card as mandatory for buttons, inputs and icons: 3:1 is criterion 1.4.11, separate from text contrast.
• Use the preview's 14px sample as the honest test — most body text is smaller than the large-text exemption.
• When a pair lands in the amber 3-4.5 band, reserve it for large headings and control boundaries, never body copy.
• Darken or lighten along lightness, not hue, when fixing a failure — that preserves brand identity while moving luminance fastest.

Frequently Asked Questions