Contrast checker
Text color page →Background color page →Open as palette →
1.65:1 · Fail
Fire Red on Beaming Mauritius
#ef4444 text on #22c55e. Edit either side to see the ratio change live — the URL updates as you go.
Live preview
The quick brown fox jumps over the lazy dog.
Body copy at a comfortable reading size. If this paragraph feels like work, your ratio is too low for long-form text.
Small print — captions, metadata, legal disclaimers. This is the size that WCAG AA was designed to protect.
ButtonSolid chip#ef4444 on #22c55e
Text
Fire Red
#
Background
Beaming Mauritius
#
WCAG 2.1 contrast
1.65
: 1
FailBelow the floor. Choose a lighter / darker pair.
| Usage | AA | AAA |
|---|---|---|
Normal text Under 18pt regular or 14pt bold | FailNeeds 4.5:1 | FailNeeds 7:1 |
Large text 18pt+ regular or 14pt+ bold | FailNeeds 3:1 | FailNeeds 4.5:1 |
UI components Icons, borders, focus rings | FailNeeds 3:1 | FailNeeds 3:1 |
APCA contrast (W3C Silver / Bronze)
+17.4
Lc
Below the floorInsufficient for any reading or UI use. Pick a lighter / darker pair.
Darker text on lighter bg
| Use case | Lc threshold | Result |
|---|---|---|
Small text Body weight, smaller than 16px | |Lc| ≥ 90 | Fail |
Body text 16–18px regular, fluent reading | |Lc| ≥ 75 | Fail |
Large text Headlines and 24px+ body | |Lc| ≥ 60 | Fail |
UI components Icons, focus rings, pictograms | |Lc| ≥ 45 | Fail |
Spot reading Glance-only, not for sustained reading | |Lc| ≥ 30 | Fail |
What the grades mean
WCAG 2.1 thresholds
- AAA (≥ 7:1) — top-tier. Small body copy reads well for users with moderate low vision without needing to squint.
- AA (≥ 4.5:1) — the accepted legal baseline for most public websites. WCAG 2.1 success criterion 1.4.3.
- AA Large (≥ 3:1) — fine for headings (18pt+ regular or 14pt+ bold) and UI components, not body text.
- Fail(< 3:1) — below the floor for any usage.
What the Lc means
APCA thresholds
APCA is the W3C-track replacement for WCAG’s contrast ratio. It corrects WCAG’s known mis-readings, especially for light-on-dark text. The Lc value is signed — positive for darker text on lighter background, negative for the opposite.
- |Lc| ≥ 75 — body text at any common size or weight reads fluently. The everyday default for accessible websites.
- |Lc| ≥ 60 — large text and headlines pass; not for normal body copy.
- |Lc| ≥ 45 — non-text UI components (icons, focus rings, pictograms).
- |Lc| ≥ 30 — glance-only spot reading.
- |Lc| < 30 — below the floor for any reading or UI use.
Algorithm by Andrew Somers (Myndex Research), tracked by the W3C Silver Working Group as the successor to WCAG 2.x contrast.