MoT
🎨
CSS & Design100% Client-Side0 Bytes Uploaded

Color Contrast & WCAG Compliance Checker

Calculate WCAG 2.1 & 2.2 color contrast ratios and relative luminance for AA and AAA compliance across normal text, large headings, and UI components.

🖥️Open in Workspace
🎨
Loading Color Contrast & WCAG Compliance Checker...
Ultra-low latency client-side execution

🎨Color Contrast & WCAG Compliance Checker Documentation & Guide

CSS & Design
Digital accessibility relies fundamentally on visible contrast between typography and background canvas surfaces. Low contrast creates severe legibility barriers for users with low vision, aging eyes, cataracts, or those using mobile devices in direct sunlight. This utility computes relative luminance in accordance with the W3C Web Content Accessibility Guidelines (WCAG) 2.1 and 2.2, determining AA and AAA conformance for body copy, large display headers, and graphical interface elements.

📋How to Evaluate Color Contrast

  1. Select or Enter Colors: Use the native color pickers or type any 6-digit hex color code into the Foreground and Background inputs.
  2. Swap Palette: Click ⇄ Swap Colors to immediately invert your foreground text and background canvas.
  3. Inspect Real-Time Preview: Review the interactive visual sample card showcasing 24px headings, 16px body copy, solid buttons, and outlined controls.
  4. Verify WCAG Standards: Check the compliance grid against Level AA (minimum 4.5:1 for body, 3.0:1 for large) and Level AAA (7.0:1 for body, 4.5:1 for large).
  5. Log & Copy: Click 🎨 Evaluate Contrast & Save to register the test in Universal History, or click 📋 Copy to extract the compliance summary.

⚙️Compliance Standards & Practical Applications

WCAG calculates contrast using relative luminance ($L$), defined as the relative brightness of any point in a colorspace normalized to 0 for black and 1 for white:

• Linearization: If C_srgb ≤ 0.04045, C_lin = C_srgb / 12.92; else C_lin = ((C_srgb + 0.055) / 1.055)^2.4
• Luminance (L): L = 0.2126 × R_lin + 0.7152 × G_lin + 0.0722 × B_lin
• Contrast Ratio: (L1 + 0.05) / (L2 + 0.05), where L1 is lighter (L1 > L2)
• Range: 1:1 (zero contrast, identical colors) to 21:1 (maximum contrast, pure black on pure white)
• WCAG 2.2 AA (Legal Baseline): Mandatory 4.5:1 ratio for regular text and 3:1 for large text (18pt/24px or bold 14pt/18.66px) across public and enterprise software.
• Design System Tokens: Audit primary, secondary, and destructive button pairings in both Light and Dark mode before shipping UI library components.
• UI Components & Icons (3.0:1): Form inputs, active border focus rings, toggle switches, and graphical navigation indicators must maintain at least 3.0:1 contrast against adjacent background colors.
100% Client-Side Privacy Guarantee:All color conversions, sRGB gamma decoding, and luminance calculations run strictly inside your local browser sandbox. Zero design tokens or proprietary theme values are transmitted across external networks.
✨