Design & Creative

Contrast Checker

Test WCAG AA and AAA contrast for text and UI components. Adjust the foreground lightness to find the nearest passing shade.

AA5.47:1
▸wcag.contrast/#0f766e-on-#ffffff
Design · Accessibility · WCAG 2 + APCA

Contrast Checker

WCAG 2 ratio, WCAG 3 perceptual contrast, and colour-blind simulation in one view.

5.47
Contrast ratio
AA
1:134.5721:1
Use freelyAPCA Lc 76.9Fluent body text
Pass / fail at each threshold

WCAG 2 conformance

AA · Normal text
4.5:1pass
AA · Large text
3:1pass
AAA · Normal text
7:1fail
AAA · Large text
4.5:1pass
UI components
3:1pass
Foreground · Background

Colours

Adjust foreground lightness
#0F766E5.47:1
Nearest passing shades
Sample type · Multiple sizes

Live preview

Display · 32 / bold
5.47:1
Design that everyone can read.
Headline copy at twenty pixels reads here.
Body text at base size. The quick brown fox jumps over the lazy dog. Contrast drives whether someone finishes a paragraph or bounces.
Small text · captions, footnotes, legal disclaimers, helper text.
Eyebrow · 12px uppercase
Inline link
Colour-blindness simulation
~8% of men · ~0.5% of women
Aa
Deuteranopia
red-green · most common
11.79:1
Aa
Protanopia
red-green
10.03:1
Aa
Tritanopia
blue-yellow
5.78:1

WCAG 2 ratio range is 1:1 (no contrast) to 21:1 (black on white). AA needs 4.5:1 for normal text and 3:1 for large or UI; AAA pushes to 7:1. APCA (WCAG 3 candidate) measures perceived contrast — Lc 60+ is comfortable body text.

Related tools

Color Palette Extractor

Upload an image and extract 3-16 dominant colors via k-means. Export as CSS variables, Tailwind config, or JSON. Runs on canvas, client-side.

Font Pairing

Pick a heading font from 30 curated Google Fonts and get 3-5 body pairings with reasoning. Live preview plus copy-ready <link> + CSS.