# WCAG Contrast Checker

> Check colour contrast against WCAG AA and AAA thresholds for accessible text.

To check colour contrast, pick a text colour and a background colour. The ratio is calculated using the WCAG relative luminance formula and checked against AA and AAA thresholds, adjusted automatically for large or bold text.

**URL:** https://convertto.tech/t/contrast-checker
**Category:** Color Tools (https://convertto.tech/c/color-tools)
**Privacy:** Runs entirely in the browser; no upload
**Cost:** Free, no sign-up
**Last updated:** 2026-08-01

## Key facts

- **Privacy:** Runs entirely in your browser — nothing is uploaded
- **Cost:** Free, unlimited, no sign-up

## How to use

1. Pick the text colour.
2. Pick the background colour.
3. Set the font size.
4. Turn "Bold text" on or off as needed.
5. The result appears immediately — copy or download it.

## FAQ

### What contrast ratio do I actually need?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1. Most legal accessibility requirements reference AA, so treat 4.5:1 as the floor for body copy.

### Does contrast apply to icons and borders?

Yes. WCAG 2.1 added a 3:1 requirement for non-text elements that convey meaning — form field borders, focus indicators and icon buttons all need to meet it.

## Sources

- [WCAG 2.2 SC 1.4.3 - Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) — W3C
- [WCAG 2.2 SC 1.4.11 - Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html) — W3C

## Related tools

- [Colour Blindness Simulator](https://convertto.tech/t/color-blindness-simulator): See how a colour appears to people with protanopia, deuteranopia and tritanopia.
- [Palette Accessibility Grader](https://convertto.tech/t/palette-accessibility-grader): Grade every colour in a palette against one or more backgrounds for WCAG contrast.
- [CSS Named Colours Reference](https://convertto.tech/t/css-named-colors): Every CSS colour name with its HEX, RGB, HSL and OKLCH value, sortable by hue and contrast.
- [AI Alt Text Generator](https://convertto.tech/t/ai-alt-text-generator): Describe an image with a captioning model running in your browser — a first draft for the alt attribute you then edit.
- [Alt Text Checker](https://convertto.tech/t/alt-text-checker): Find images with missing, empty, filename-based or overlong alternative text.
- [ARIA Roles Reference](https://convertto.tech/t/aria-roles-reference): Search ARIA roles with their required attributes, native HTML equivalents and gotchas.
- [Heading Structure Validator](https://convertto.tech/t/heading-structure-validator): Check a page for skipped heading levels, missing or multiple H1s and empty headings.
- [HTML Landmark Checker](https://convertto.tech/t/html-landmark-checker): Check a page for the landmark regions screen reader users navigate by.