utilities
Flexbox Froggy
Learn CSS Flexbox through 24 interactive coding puzzles with frogs.
#flexbox#learning#interactive
Built-in toolFree · No signup
Color Contrast Checker
Check foreground/background colour pairs against WCAG 2.1 AA (4.5:1) and AAA (7:1) standards. See the contrast ratio instantly, preview real text at multiple sizes, and auto-fix failing pairs with one click.
16.27:1
Contrast ratio
AAA
AA✓ Normal (4.5:1)✓ Large (3:1)
AAA✓ Normal (7:1)✓ Large (4.5:1)
Foreground (text)
Background
Text preview
The quick brown fox jumps over the lazy dog.
Normal text — Body copy
The quick brown fox jumps over the lazy dog.
Large text — ≥18pt or ≥14pt bold
The quick brown fox jumps over the lazy dog.
Heading — H1–H3
The quick brown fox jumps over the lazy dog.
UI element — Buttons, labels
How to use
01
Pick colours
Use the colour picker or click a palette swatch for foreground and background. Hex input also supported.
02
Read the ratio
The contrast ratio updates live. Green = AAA pass, yellow = AA only, red = fail.
03
Auto-fix if failing
Click 'Auto-fix to AA' and the tool adjusts the foreground colour to the nearest WCAG AA-passing value.
04
Copy CSS variables
Grab the --color-foreground and --color-background CSS variable snippet at the bottom.
More CSS utility tools
From our directory of 30+ CSS tools.
Know a great CSS tool?
Submit it to the directory and help developers discover it.