Springr
Contrast Checker
All tools

Contrast Checker

Check WCAG 2.1 contrast ratios in OKLCH and get the closest passing color suggestions.

Target:
L0.85
C0.020
H250
L0.29
C0.000
H180

Large heading sample

Body text preview — the quick brown fox jumps over the lazy dog. Check readability at both sizes.

8.94:1Passes 4.5:1 target
AA normal ✓
AA large ✓
AAA normal ✓
AAA large ✓
CSS
color: oklch(0.85 0.02 250);
background: oklch(0.29 0 180);
/* contrast-ratio: 8.94:1 */

About Contrast Checker

Check the contrast between text and background colors against WCAG 2.1. The checker works in OKLCH and, when a pair fails, offers the nearest colors that pass, so you can fix accessibility issues without losing your palette.

How to use it

  1. Enter a foreground and a background color.
  2. Read the contrast ratio and the pass or fail result for WCAG 2.1 levels.
  3. If it fails, pick one of the suggested colors that is closest to your original.

Frequently asked questions

What contrast ratio do I need?
WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and UI components. AAA raises the bar to 7:1 for normal text and 4.5:1 for large text.
What happens if my colors fail?
When a pair fails, the tool suggests the closest passing colors in OKLCH, so you can keep the hue and adjust lightness instead of starting over.