What it does
ContrastChecker.online calculates the contrast ratio between foreground and background colours. It shows sample text and separate AA and AAA accessibility contrast outcomes for ordinary and large text, with a URL-copying control for sharing the pair.
Enter the two hex colours and compare the sample heading and paragraph. Copy URL keeps the selected pair together for a design review. The four result groups follow these text-contrast thresholds:
| Text | AA minimum | AAA enhanced |
|---|---|---|
| Ordinary text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
Below the calculator, explanations distinguish large text, incidental content and logos, with links to the relevant WCAG criteria. The paired relative-luminance tool measures one colour’s brightness on a scale from black at 0 to white at 1. It also offers a control for finding colours with a requested luminance.
Strengths
- A copied URL preserves the foreground and background pairing.
- The criteria and their exceptions are explained beside the results.
Watch out for
- The checker evaluates one entered colour pair at a time.
Best for
- Designers sharing a particular text-and-background contrast decision.
Sources
- Color Contrast Accessibility Checker (WCAG) (Oct 28, 2026)
- Color Relative Luminance Calculator (WCAG) (Oct 28, 2026)
- About | contrastchecker.online (Oct 28, 2026)
- Privacy Policy | contrastchecker.online (Oct 28, 2026)