Skip to content
Convertto

Palette Accessibility Grader

Grade every colour in a palette against one or more backgrounds for WCAG contrast.

A palette is accessible only in combination with its backgrounds. This grader computes the WCAG contrast ratio for every foreground and background pair, then grades each against the AA threshold of 4.5:1 for body text, 3:1 for large text and non-text elements, and the AAA threshold of 7:1.

Runs in your browser
Thresholds
4.5:1 body AA, 3:1 large text and UI, 7:1 body AAA
WCAG criteria
1.4.3 Contrast (Minimum), 1.4.6 Contrast (Enhanced), 1.4.11 Non-text Contrast
Privacy
Runs entirely in your browser — nothing is uploaded
Cost
Free, unlimited, no sign-up

Frequently asked questions

What counts as large text?

At least 18 point, or 14 point when bold — roughly 24px and 18.66px at default browser settings. Large text only needs 3:1 because bigger glyphs have thicker strokes and are easier to distinguish.

How to use the palette accessibility grader

  1. 1Enter or paste your palette.
  2. 2Enter or paste your backgrounds.
  3. 3Turn "Also grade for large text" on or off as needed.
  4. 4The result appears immediately — copy or download it.

Embed this tool

Put the working palette accessibility grader on your own site. It runs in your visitors' browsers exactly as it does here — free, no account, nothing uploaded.

Share this tool

Related tools

WCAG Contrast CheckerCheck colour contrast against WCAG AA and AAA thresholds for accessible text.Alt Text CheckerFind images with missing, empty, filename-based or overlong alternative text.Heading Structure ValidatorCheck a page for skipped heading levels, missing or multiple H1s and empty headings.HTML Landmark CheckerCheck a page for the landmark regions screen reader users navigate by.Link Text CheckerFind vague link wording — "click here", "read more", bare URLs and duplicated labels.ARIA Roles ReferenceSearch ARIA roles with their required attributes, native HTML equivalents and gotchas.

Last updated

More accessibility