Design Tools
Color Picker
Pick a colour and read off its HEX, RGB and HSL values.
Design Tools
Contrast Checker
Check foreground and background contrast against accessibility thresholds.
Tool Panel
Processed locallyAbout Contrast Checker
Computes the WCAG contrast ratio and marks whether AA and AAA pass for normal and large text.
- 1
Uses the WCAG definition: relative luminance from the sRGB coefficients (0.2126 / 0.7152 / 0.0722), then `(lighter + 0.05) / (darker + 0.05)`. The theoretical maximum is 21:1 for pure black on pure white.
- 2
Reports all four thresholds at once: normal-text AA 4.5, large-text AA 3.0, normal-text AAA 7.0, large-text AAA 4.5. The default pair here measures 17.74:1.
- 3
The swatch and the text field stay in sync, and both 3- and 6-digit hex are accepted (either case). An 8-digit hex with alpha is rejected — contrast is defined on opaque colours, so a translucent one has to be composited first.
- 1
Set foreground and background
Pick from the swatch or paste a hex; the two stay in sync.
- 2
Read the four verdicts
Each threshold passes or fails on its own, so there is no table to memorise.
- 3
Adjust until all pass
Changing lightness moves the ratio most: darken the foreground or lift the background rather than swapping hues.
WCAG defines large text as 18pt (≈24px) or 14pt (≈18.66px) bold — thicker strokes are easier to resolve, so the threshold is relaxed. Judge by the rendered size, not the number in the design file.
An 8-digit hex with alpha is rejected; only 3- and 6-digit hex are accepted. That is not laziness: the definition requires a translucent colour to be composited onto the background first, otherwise the same colour has a different ratio on every background. Composite it by hand and test the resulting opaque colour.
Related tools
View allDesign Tools
Gradient Generator
Build CSS linear and radial gradients visually, then copy the code.
Design Tools
Design Tools
Box Shadow Generator
Tune a box shadow visually and copy the CSS.
Design Tools
Design Tools
Unit Converter
Convert physical units across length, weight, volume and more.
Design Tools
Design Tools
Bytes Converter
Convert between bytes, KB, MB, GB and TB.
Design Tools
Design Tools
Border Radius Generator
Tune each corner visually and copy the CSS border-radius.
Design Tools
Design Tools
Clip Path Generator
Drag the points to shape a polygon and copy the CSS clip-path.
Design Tools
Design Tools
Cubic Bezier Generator
Drag the control points to shape an easing curve and copy the CSS.
Design Tools