Check WCAG 2.2 and APCA contrast. Color-blind simulation, fix suggestions, CSS export — 100% local.
| Text Size | Level | Required | Result |
|---|---|---|---|
| Normal text | AA | 4.5:1 | ✓ Pass |
| Normal text | AAA | 7:1 | ✗ Fail |
| Large text (≥24px / 18.66px bold) | AA | 3:1 | ✓ Pass |
| Large text (≥24px / 18.66px bold) | AAA | 4.5:1 | ✓ Pass |
color: #5b9cff; background-color: #0f1115; /* Contrast ratio: 6.88:1 */
This tool runs 100% in your browser. All computation happens locally on your device — your input is never uploaded to any server. Results are for reference only.
WCAG 2.2 defines contrast as (L₁ + 0.05) / (L₂ + 0.05), where L₁ and L₂ are the relative luminances of the lighter and darker colors. Relative luminance linearizes each sRGB channel (c/12.92 when c ≤ 0.03928, otherwise ((c+0.055)/1.055)^2.4) and blends them as 0.2126R + 0.7152G + 0.0722B. Pass thresholds depend on text size: normal text needs 4.5:1 for AA and 7:1 for AAA, while large text (≥24px, or ≥18.66px bold) only needs 3:1 for AA and 4.5:1 for AAA. The tool computes this ratio live, also reports the APCA Lc perceptual score, simulates protanopia/deuteranopia/tritanopia, and can suggest a passing color.
White on a typical mid-red sits around 2.8:1 — fine for a decorative accent, but far below the 4.5:1 AA floor for body text.
Diego's app uses a red primary button (#ff6b6b) on a white page, and his designer wants to confirm the label passes accessibility standards.
To check contrast: enter foreground and background colors — the tool calculates the WCAG contrast ratio and shows whether it passes AA or AAA accessibility standards.
FreeToolHub Contrast Checker is a free browser-based tool that tests color contrast ratios against WCAG accessibility standards, no signup.
Check WCAG 2.2 and APCA contrast ratios. Color-blind simulation, auto-fix suggestions, CSS export. Free, no signup, 100% in-browser.
WCAG (Web Content Accessibility Guidelines) 2.2 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold) at Level AA. Level AAA requires 7:1 for normal text and 4.5:1 for large text. Non-compliant contrast makes content unreadable for users with visual impairments and can result in legal action under accessibility laws like the ADA.
APCA (Accessible Perceptual Contrast Algorithm) is a new contrast model proposed for WCAG 3.0. Unlike the current WCAG ratio which uses a simple luminance formula, APCA accounts for how the human eye perceives contrast differently depending on text size, weight, and polarity (light-on-dark vs dark-on-light). APCALc values range from 0 to 106+, with 75+ recommended for body text.
The tool applies scientific color transformation matrices to simulate how your colors appear to users with Protanopia (red-blind, ~1% of males), Deuteranopia (green-blind, ~1% of males), and Tritanopia (blue-blind, rare). This helps you verify that your design is accessible to the ~8% of men and ~0.5% of women with color vision deficiencies. If the simulated contrast ratio drops below 4.5:1, your design may be inaccessible to these users.
WCAG 2.2 Level AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18px or under 14px bold) and 3:1 for large text (18px+ or 14px+ bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. This tool checks all four levels automatically.
WCAG uses a simple luminance ratio formula (0.2126R + 0.7152G + 0.0722B) that can overestimate contrast for certain color pairs. APCA is a newer model that accounts for perceptual contrast — how the human eye actually perceives different colors — and is being considered for WCAG 3.0. This tool shows both metrics so you can evaluate using either standard.
Yes, this tool accepts all three formats. Enter "#1a0dab" for HEX, "rgb(26, 13, 171)" for RGB, or "hsl(234, 86%, 36%)" for HSL. You can also use named colors like "white", "black", "navy", etc. The tool automatically detects the format and converts between them.
When your contrast ratio fails, the tool automatically suggests the nearest passing color. It adjusts the lightness of your foreground color (while preserving hue and saturation) to find the closest compliant alternative. Click "Use" to apply the suggested color instantly.
This tool is also known by these tasks — each link opens the same tool with a focused guide:
What do you call a crab that plays baseball?
No paywalls, no signups, no data sold. Built by a solo developer who believes useful tools should be accessible to everyone.
☕Support me on Ko-fi— keep tools free100% of proceeds go towards hosting & building more free tools.