Check whether a text color and its background are readable enough for ADA compliance. The ADA has no contrast numbers of its own, so this uses WCAG 2.1 Level AA, the standard the DOJ and the courts apply. If a pair fails, it suggests the nearest color that passes.
Check a pair
Enter any CSS color: #1a73e8, rgb(26 115 232), hsl(…), oklch(…) or a name like rebeccapurple.
Check a whole palette
Paste a brand palette, one color per line, and every text-on-background pairing gets graded at once. Rows are text colors, columns are backgrounds. Click a cell to open it in the checker above.
What the numbers mean
In 2024 the DOJ’s Title II rule named WCAG 2.1 Level AA as the technical standard for state and local government websites. Courts and settlements use the same bar for businesses under Title III. These are the contrast parts of it.
| What | AA (ADA target) | AAA | WCAG |
|---|---|---|---|
| Body text under 24px, or under 18.66px if bold | 4.5 : 1 | 7 : 1 | 1.4.3 / 1.4.6 |
| Large text 24px+ regular, or 18.66px+ bold (18pt / 14pt bold) | 3 : 1 | 4.5 : 1 | 1.4.3 / 1.4.6 |
| UI and graphics input borders, icons, focus rings, chart lines | 3 : 1 | no extra level | 1.4.11 |
| Exempt logos, disabled controls, pure decoration | none | none |
- Ratios are never rounded up. A pair at 4.499 : 1 fails 4.5. This tool cuts the shown value off at two decimals and grades on the exact number.
- Color alone can’t carry meaning (WCAG 1.4.1). A red error border also needs an icon or a message, and the color-vision preview above shows why.
- Passing contrast is one part of compliance. Font size, focus states, alt text and keyboard use matter too. Treat this as a design check, not a legal opinion.
