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 (≥18px) | AA | 3:1 | ✓ Pass |
| Large text (≥18px) | AAA | 4.5:1 | ✓ Pass |
color: #5b9cff; background-color: #0f1115; /* Contrast ratio: 6.88:1 */
About this tool
Check WCAG 2.2 and APCA contrast ratios. Color-blind simulation, auto-fix suggestions, CSS export. Free accessibility tool — no signup, 100% browser-based.
What Is WCAG Contrast Compliance?
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.
What Is APCA Contrast?
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.
How Does Color-Blind Simulation Work?
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.
Frequently asked
What contrast ratio do I need for WCAG AA?
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.
What is the difference between WCAG and APCA?
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.
Can I use HEX, RGB, or HSL colors?
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.
How do I fix a failing contrast ratio?
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.
Related tools
😂 Joke of the Day
Why did the microwave get a raise?
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.