What it does
WebAIM Contrast Checker evaluates a foreground and background pair for normal text, large text and graphical interface elements. Foreground transparency and separate lightness controls help match the colours actually used in a design.
Enter both hexadecimal values or select colours with the pickers. Set Alpha when the foreground is translucent, then adjust Lightness if the pair needs more separation. The result has distinct AA and AAA rows for normal and large text, plus an AA result for graphics and controls.
Use the permalink to keep the tested combination. WebAIM also documents a small API, a software-readable version of the result: adding its API option to a permalink returns the ratio and pass/fail states as JSON.
For links identified by colour alone, open the separate Link Contrast Checker. It compares link, body-text and background colours in three relationships. A coloured link also needs a non-colour indicator on hover and keyboard focus; the ratio alone does not cover that requirement.
Strengths
- An eyedropper in the colour picker can sample an on-screen element.
Watch out for
- JavaScript is required for the calculators.
Best for
- Checking transparent labels and colour-only links in a web interface
Sources
- WebAIM Contrast Checker (Oct 27, 2026)
- WebAIM Link Contrast Checker (Oct 27, 2026)