Advancement · School Operations · Accessibility

Grey footer text
fails more readers
than you think.

Type the colour pairs your site or newsletter uses and what each is for. The calculator gives the WCAG ratio, says whether it meets Level AA and AAA, and offers the nearest shade of the same colour that passes.

Check the coloursWhat you get
$12one-time · every device you sign in on
Buy · $12

Included with Caveat Classroom and Whole-school licenses. Or get it in the School operations toolkit, $49 for 32 items.

The contrast calculator

The worked example is a made-up district home page with five colour pairs, three of them failing. Nothing you type leaves this browser.

Loading the calculator. If nothing appears, turn on JavaScript.

What you get

Advancement · School Operations$12 · included with Classroom and Whole-school licenses

What you finish with
For each colour pair, its contrast ratio, Level AA and AAA results for its use and a passing alternative for any failure, with a count of pairs that pass. It prints as a summary and downloads as a spreadsheet.
Who it is for
School and district web and communications staff, technology staff, and teachers or editors who publish class pages and newsletters.
Format
Browser calculator for a phone, tablet or computer, by touch or keyboard. Up to 30 pairs. Prints a summary; downloads a spreadsheet (.csv); export and import a file.
Access
$12 one-time, yours on every device you sign in on; the tool opens once you are signed in with it. Included with Caveat Classroom and Whole-school licenses. Also in the School operations toolkit ($49) and the Advancement Suite pass ($99), and 1 more bundle. Everything you type stays in this browser; nothing is sent to Caveat.
Where it lives
The School Operations space in Caveat Advancement.
Support
Questions, a correction or a request: team@caveatacademic.com.

How to use it

  1. Name the site, page or palette you are checking.
  2. Add each colour pair with where it is used, its foreground and background hex codes and what it is for.
  3. Read the lowest ratio and which pairs fail Level AA.
  4. Copy the passing alternative into your style sheet or template, then check again.
  5. Print the summary or download the spreadsheet for your records.

Check the colours

How the ratio is worked out

Relative luminance of each colour, then lighter over darker.

The worked example: footer textFooter text#9AA3AEon white #FFFFFFRelative luminance0.361white is 1.000Ratio2.55:1(1.000 + 0.05) ÷ (0.361 + 0.05)Needs 4.5:1#70777Fdarkened until it passes, 4.53:1The worked example: footer textFooter text#9AA3AEon white #FFFFFFRelative luminance0.361white is 1.000Ratio2.55:1(1.000 + 0.05) ÷ (0.361 + 0.05)Needs 4.5:1#70777Fdarkened until it passes, 4.53:1
Each colour is turned into relative luminance (how bright it looks, from 0 for black to 1 for white); the ratio compares the lighter with the darker. The suggested fix is the first shade of the same colour that passes.

The formula

Each sRGB channel is divided by 255 and linearised (values up to 0.04045 are divided by 12.92; higher values become ((v + 0.055) ÷ 1.055) to the power 2.4). Relative luminance weights them 0.2126 red, 0.7152 green and 0.0722 blue. The ratio is the lighter luminance plus 0.05 over the darker plus 0.05, from 1:1 to 21:1. WCAG says not to round, so the page cuts to two decimals.

The thresholds

Level AA (success criterion 1.4.3): 4.5:1 for normal text, 3:1 for large text. Level AAA (1.4.6): 7:1 and 4.5:1. Interface parts and graphics (1.4.11, Level AA): 3:1 against what is next to them. Logos and purely decorative text are exempt. Section 508 for federal agencies and the Department of Justice 2024 rule under ADA Title II for state and local government sites, including public schools, both point to WCAG Level AA.

Sources

  1. W3C. Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation: success criteria 1.4.3, 1.4.6 and 1.4.11, and the definitions of contrast ratio, relative luminance and large scale text (w3.org/TR/WCAG22).
  2. W3C Web Accessibility Initiative. Understanding Success Criterion 1.4.3: Contrast (Minimum) (w3.org/WAI/WCAG22/Understanding).
  3. U.S. Access Board. Section 508 Standards, 36 CFR part 1194, which incorporate WCAG 2.0 Level AA (access-board.gov).
  4. U.S. Department of Justice. Nondiscrimination on the Basis of Disability; Accessibility of Web Information and Services of State and Local Government Entities, final rule, 28 CFR part 35, subpart H (2024), adopting WCAG 2.1 Level AA (ada.gov).

The worked example is made up. A ratio check covers colour only; test real pages with a keyboard and a screen reader too. Your colours stay in this browser. Support: team@caveatacademic.com.