WCAG Color Contrast & Accessibility Checker

Test foreground and background text color contrast ratios against WCAG 2.1 AA and AAA standards.

Category: Design

How to Use WCAG Color Contrast & Accessibility Checker

Enter your foreground text color in 3-digit (#FFF) or 6-digit (#1E293B) HEX format.
Enter your background surface color in 3-digit or 6-digit HEX format.
Click Check Color Contrast to compute sRGB relative luminance and the (L1 + 0.05) / (L2 + 0.05) ratio.
Review WCAG 2.1 AA and AAA pass/fail badges for Normal Text, Large Headings, and UI Components.

Related Design Tools

Color Palette Generator
Generate beautiful color palettes, complementary harmonies, triadic schemes, and hex color codes.
Color Code Converter (HEX, RGB, HSL)
Convert colors between HEX, RGB, HSL, and preview swatch.
CSS Linear & Radial Gradient Generator
Create smooth multi-stop CSS linear and radial gradients with angle controls and Tailwind CSS classes.
Glassmorphism & Frosted Glass Generator
Design frosted glass cards with CSS backdrop-filter blur, translucent borders, and light/dark theme styling.
CSS Box Shadow & Glow Generator
Visually design CSS box-shadows, soft elevations, and neon glows with instant CSS and Tailwind class output.

Frequently Asked Questions

How is the WCAG 2.1 color contrast ratio calculated?

The W3C Web Content Accessibility Guidelines (WCAG 2.1) calculate contrast using the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Ratios range from 1:1 (identical colors) to 21:1 (pure black #000000 on pure white #FFFFFF).

What is the difference between WCAG Level AA and Level AAA requirements?

For normal body text, WCAG 2.1 Level AA (Success Criterion 1.4.3) requires a minimum contrast ratio of 4.5:1, while Level AAA (Success Criterion 1.4.6) requires at least 7.0:1. For large text (18pt / 24px regular, or 14pt / 18.66px bold), Level AA requires 3.0:1 and Level AAA requires 4.5:1.

What contrast ratio is required for UI components, icons, and input borders?

Under WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast), interactive UI components (such as button boundaries, form input borders, focus rings, and meaningful SVG icons) must maintain at least a 3.0:1 contrast ratio against adjacent background colors.

Does the contrast checker support 3-digit shorthand HEX codes like #FFF?

Yes. You can enter 3-digit shorthand HEX colors (such as #FFF or #09C) or standard 6-digit HEX codes (#FFFFFF or #0099CC), with or without a leading '#' symbol. The calculator automatically expands 3-digit codes before computing sRGB gamma-corrected luminance.

Why do two colors that look distinct to the eye sometimes fail WCAG AA?

Human perception of hue difference does not always equal luminance difference. For example, pure red (#FF0000) and pure blue (#0000FF) have very different hues, yet low luminance contrast for users with protanopia, deuteranopia, or low vision. WCAG measures relative luminance to guarantee legibility for all readers.