Check WCAG 2.1 accessibility compliance
{{ __t('small_text') }}: The quick brown fox jumps over the lazy dog.
{{ __t('large_text') }}: The quick brown fox.
{{ __t('contrast_ratio') }}
About 8% of men and 0.5% of women have some form of color vision deficiency. Low contrast makes text hard to read — especially at small sizes, on poor displays, and for users with visual impairments. WCAG (Web Content Accessibility Guidelines) sets minimum values that are legally required in many countries (EU EN 301 549, US ADA, BITV).
Level AA requires 4.5:1 for normal text (below 24 px or 18.66 px bold) and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text. UI components and graphics need at least 3:1. These values are based on the relative luminance per WCAG formula — hue does not matter.
The contrast ratio per WCAG 2.2 is calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter and L2 the darker color. Relative luminance itself is derived in the sRGB color space: each R, G, B channel is first converted from gamma-encoded values back to linear light (threshold 0.03928), then weighted as 0.2126*R + 0.7152*G + 0.0722*B. These weights reflect the human eye's sensitivity — green contributes most to perceived brightness, blue least.
RGB describes color additively through three channels, but it is unsuitable for design decisions: two RGB values that look equally bright to the eye can have completely different hex codes. HSL (hue, saturation, lightness) is more intuitive for color schemes, yet the lightness component does not match perceived brightness. LAB on the other hand is perceptually uniform — equal numerical distances correspond to equal perceived differences. WCAG deliberately uses relative luminance instead of LAB because the formula is tailored to display output (sRGB).
CSS Color Module Level 4 extends this picture with new color spaces like color(display-p3 ...), oklch(), and lab(). Displays with the P3 gamut can show up to 25% more colors than sRGB — especially in reds and greens. When designing for P3 devices, provide sRGB fallbacks. Important: WCAG contrast calculations remain sRGB-based; APCA (Advanced Perceptual Contrast Algorithm) is a modern successor but not yet normative in WCAG.
The tool is simple to operate, but a few steps ensure you get reliable results — especially when checking a real brand or design-system palette.
These examples show typical design decisions and whether they meet WCAG thresholds.
color: #212121; background: #ffffff; hits 16.1:1 — easily passes AAA, ideal for long reading texts.color: #0d9488; background: #ffffff; yields 3.87:1 — AA Large passes, AA Small (4.5:1) fails. Buttons with this color need at least 18.66 px bold or a darker shade like #0f766e (5.2:1).color: #9e9e9e; background: #ffffff; sits at 2.85:1 — fails AA. WCAG however explicitly exempts disabled states (Success Criterion 1.4.3 note).color: #e0e0e0; background: #121212; hits 15.3:1 — very eye-friendly. Make sure accent colors against #121212 also hold AA; Material Design therefore recommends 16% white overlay for surface elements.The WCAG formula does not consider hue differences, only luminance — two highly saturated complementary colors (e.g. pure red on pure green) can have a 1.06:1 ratio yet still appear readable for people without color vision deficiency. For people with deuteranopia or protanopia such a design is catastrophic. Also remember that displays vary enormously: an uncalibrated office monitor, an OLED phone, and an e-ink reader render the same hex codes very differently. Wide-gamut displays (P3) show colors more saturated — contrasts can appear visually stronger than the sRGB calculation suggests. Finally: reflections, sunlight, and low brightness settings push effective contrast down significantly. A safety buffer of 10–20% above the WCAG minimum is sensible in practice.