01
Sample text, Aa 123
12.94:1Meets thresholdTarget: 4.5:1
Audit every important color pair.
One contrast check is rarely enough for a real interface. Record text, controls, buttons, states, and supporting details together; see what fails WCAG 2.x contrast thresholds; then export a reusable report. Your worksheet stays in your browser.
YOUR WORKSHEET
Color-role inventory
Starter pairs are illustrations, not colors from your own website. Edit or replace them to reflect actual rendered styles.
7Total pairs
6Meeting threshold
1Below threshold
0Need valid HEX
02
Sample text, Aa 123
6.22:1Meets thresholdTarget: 4.5:1
03
Sample text, Aa 123
5.90:1Meets thresholdTarget: 4.5:1
04
Sample text, Aa 123
2.87:1Below thresholdTarget: 4.5:1
Suggested foreground: #72777F
Measured 4.50:1 against your current background (target 4.5:1). Review this change against your brand and all interaction states.
05
Sample text, Aa 123
7.55:1Meets thresholdTarget: 3:1
06
Input boundary
4.68:1Meets thresholdTarget: 3:1
07
Sample text, Aa 123
7.72:1Meets thresholdTarget: 4.5:1
7 / 24 pairs
Keep the evidence with your project.
Export CSV for review or JSON to reopen this worksheet. Only colors you explicitly apply or enter are exported; suggestions are previews until applied. No account or upload is required. Export is blocked until every HEX entry is valid; failed contrast scores remain in the report.
Optional local save
This worksheet does not save automatically. Saving uses browser storage on this device; it is not a cloud backup.
FROM A RATIO TO A DECISION
A repeatable contrast review before launch
When you only measure the hero heading, lower-visibility elements slip through: navigation links, explanatory hints, disabled styles, selection states, and error messages. This worksheet makes those potential gaps visible on one page.
List actual combinations
Inspect the rendered site and note the foreground and background for each readable label, essential control boundary, and state. Repeated text colors may need different checks on different surfaces.
Choose the correct category
Most normal text requires at least 4.5:1 for WCAG 2.x AA. Large text and essential non-text UI indicators usually require 3:1. Do not treat small bold text as large merely because it looks prominent.
Prioritize real failures
For a failing pair, preview a measured foreground-color suggestion, then apply or undo it without altering the background. You can also adjust either color manually. Recheck hover, focus, selected, error, and disabled states in the actual browser.
Export the evidence
Attach the CSV to a QA checklist or preserve JSON for your next release. The pass count is not a website accessibility score: the worksheet only covers combinations you entered.
What this worksheet does not claim
WCAG 2.x contrast is calculated for two opaque sRGB HEX colors. Transparent overlays, gradients, photographs, anti-aliasing, font-size eligibility, graphical icons, keyboard support, and color-only meaning need separate review. Disabled controls and decorative elements can have exceptions depending on the criterion; entering them here does not establish whether the exception applies. A passing report is not a WCAG certification.
See the Image Contrast Lab for photographs, worked examples for real design decisions, and methods and limitations for the underlying formula.