Contrast Checkers, under Web Accessibility, checks colour combinations against the WCAG 2.1 contrast requirements. It works on colours you enter, so it is ideal while designing, before anything is built. It is available on every plan.
Three checkers
Color Contrast Checker
Enter a foreground and background colour. You get the contrast ratio and a pass or fail for normal and large text:
| WCAG AA | WCAG AAA | |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
Large text means roughly 24 pixels, or about 19 pixels if bold. Level AA is what the standard requires; AAA is a stricter, optional level.
Link Contrast Checker
For links that are not underlined. Enter your link, body text and background colours. A link that is not underlined must be told apart from the text around it, so it needs 3:1 against your body text as well as 4.5:1 against the background.
Graphical Objects and User Interface Components
For icons, input borders, and other parts of the interface that are not text. These need 3:1 against whatever is next to them.
Fix for Me
Each checker has Fix for Me. It finds the nearest shade of your colour that passes, keeping the same hue, and changes it as little as possible. It is a quick way to keep a brand colour while making it usable.
Other controls
Enter colours as hex values or pick them, and use each colour's Lightness slider to try lighter and darker versions. Each ratio is labelled Excellent, Good, Fine or Poor as a quick guide.
What it cannot check
Text over images or gradients, where there is no single background colour. For those, try the Vision Simulator, and check by eye.