Color Contrast Checker — WCAG AA & AAA Requirements, Formula & Accessible Color Guide

What Is Color Contrast Ratio?

Color contrast ratio is a numerical measure of how visually distinct two colors are from each other — specifically, the difference in luminance (perceived brightness) between a foreground color (usually text) and its background. The ratio ranges from 1:1 (two identical colors — no contrast at all) to 21:1 (pure black on pure white — maximum possible contrast).

The Web Content Accessibility Guidelines (WCAG) use contrast ratio as the primary metric for color accessibility because it correlates well with readability for people with low vision, color blindness, and age-related vision decline — and because it's mathematically objective, unlike more subjective readability assessments.

WCAG 2.1 Contrast Requirements at a Glance

WCAG 2.1 defines contrast requirements across two conformance levels (AA and AAA) and three content types (normal text, large text, and non-text elements). Here's everything in one table:

WCAG AA vs AAA — Which Do You Need?

WCAG AA is the standard minimum — it's what most accessibility laws and regulations require (ADA in the US, EN 301 549 in Europe, the Equality Act in the UK). If your site is public-facing and you care about legal compliance or serving all users, AA is your baseline. Aim for 4.5:1 on all body text and 3:1 on all large headings and UI components.

WCAG AAA is the enhanced level. It requires 7:1 for normal text — a very high bar that often conflicts with brand color palettes. WCAG itself notes that "it is not possible to satisfy all Level AAA Success Criteria for some content." AAA is aspirational: target it where you can, but don't sacrifice your design or brand identity to reach it everywhere.

Practical targets for most product teams:

• Body text: 4.5:1 minimum (AA), aim for 7:1+ where feasible (AAA)
• Headings (18px+): 3:1 minimum (AA large text)
• Buttons and CTAs: 4.5:1 on the button text; 3:1 on the button border vs background
• Form placeholders: 4.5:1 — placeholders are functional text, not decorative
• Disabled elements: Exempt from WCAG contrast requirements
• Decorative graphics: Exempt if they convey no information

How Contrast Ratio Is Calculated — The Formula

The WCAG contrast ratio formula is more complex than it looks — it accounts for how human vision perceives brightness non-linearly. Here's the full calculation:

// For each channel (R, G, B), normalize to 0–1 then gamma-correct:
const sRGB = channel / 255;
const linear = sRGB <= 0.03928
  ? sRGB / 12.92
  : Math.pow((sRGB + 0.055) / 1.055, 2.4);

// Weighted sum reflecting human perception (green contributes most)
const L = 0.2126 * R_linear + 0.7152 * G_linear + 0.0722 * B_linear;
// L ranges from 0 (black) to 1 (white)

// L1 = luminance of the lighter color, L2 = luminance of the darker
const ratio = (L1 + 0.05) / (L2 + 0.05);
// Range: 1:1 (same color) to 21:1 (black on white)

The 0.05 offset prevents division by zero when comparing pure black (L=0) against itself. The weights (0.2126, 0.7152, 0.0722) reflect that green light contributes roughly 72% of perceived brightness, red about 21%, and blue only 7% — matching human photoreceptor sensitivity.

What Counts as "Large Text" in WCAG?

WCAG defines large text precisely — and the definition matters because large text gets a more lenient contrast requirement (3:1 instead of 4.5:1):

WCAG uses point sizes in its formal specification (18pt / 14pt bold), but in practice most web projects work in pixels. The conversion is: 18pt = 24px, 14pt = approximately 18.67px — rounded to 18px in common usage. The ToolLance Contrast Checker lets you set the exact pixel size and weight, and automatically applies the correct WCAG threshold.

12 Color Combinations — Contrast Ratio Pass/Fail

Real examples of common design color pairs, with their exact contrast ratios and WCAG AA/AAA results. The failing examples are some of the most commonly used patterns on the web today.

The 6 Most Common Contrast Failures (And How to Fix Each)

These are the patterns that appear most frequently in accessibility audits of real websites. Each one has a specific fix that preserves the design intent while reaching WCAG compliance.

How to Check Color Contrast for Your Design

The fastest workflow for checking contrast during design — using ToolLance's Contrast Checker:

Contrast for Non-Text Elements — Icons, Borders, and UI Components

WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast) — a Level AA requirement — extends the 3:1 contrast requirement to UI components and graphical objects. This covers:

• Icons that convey information (checkboxes, navigation icons, status indicators)
• Focus indicators — the outline that appears when a keyboard user focuses an element
• Form field borders — the border of an input or select field against its background
• Button boundaries — when a button's fill is the same as the page background, the border must have 3:1 contrast
• Chart elements — lines, bars, and data points that encode information

Decorative images, logos, and disabled state controls are explicitly exempt. The easiest way to check non-text contrast is the same tool — enter the icon color as foreground and the background color, then target 3:1.

7 Practical Tips for Accessible Color in Design Systems

Related Tools

After confirming contrast compliance, use the Palette Generator to build a full accessible color system from your brand colors — it generates monochromatic shades so you always have a compliant text shade available. The Color Blindness Simulator lets you preview how your palette appears under Protanopia, Deuteranopia, Tritanopia, and Achromatopsia. For HEX-to-RGB conversions needed during the process, the Color Converter outputs all formats from a single input.