text
Text below the WCAG large-scale definition. Checks 4.5:1 at AA and 7:1 at AAA against its declared background.
Palette contrast worksheet · WCAG 2.2 · opaque sRGB only
Palette contrast matrix for every color pair
Paste 2–20 named colors, give each one a role, and select the color pairs that really touch. The matrix calculates every ratio; result cards apply text or non-text thresholds only where the selected roles make them relevant.
NOT_A_FULL_ACCESSIBILITY_AUDIT
A passing ratio is not a claim of WCAG, ADA, legal, product, or whole-interface compliance.
Step 1
Enter palette tokens and roles
Step 2
Declare expected adjacency
Use the selectable upper half. The lower half mirrors the same ratio.
No adjacency is assumed. Select a pair only when the two solid colors touch in the use you are reviewing. For text, the other color must be the actual background. For UI/state/graphic information, it must be the actual adjacent color.
Enter a valid palette to build the matrix.
Step 3
Role-aware results
0 selected pairs · result UNKNOWN
Failing checks, largest numeric gap to the threshold first
Worked luminance calculation
Select an adjacency to see the luminance calculation.
Worked example
Why a near-threshold pair needs the actual ratio
For opaque #767676 against #FFFFFF, this worksheet calculates about 4.542225:1. That clears the WCAG 2.2 AA threshold for ordinary text (4.5:1), but not the AAA threshold (7:1). A number displayed as 4.54 is not what the pass/fail check uses: the code compares the unrounded ratio. The roles and real adjacency still need to be checked in the actual interface.
Role guide
What each role means in this worksheet
large-text
Text you have independently confirmed is at least 18pt, or at least 14pt and bold (or the applicable equivalent). Checks 3:1 at AA and 4.5:1 at AAA.
ui-state
Color needed to identify an active UI component or state, or an essential graphical object. Checks 3:1 at AA against the declared adjacent color.
surface
A background or surface. It creates no requirement by itself, but can be the adjacent color for a text or non-text role.
decorative
Color you assert is irrelevant to meaning or operation. It creates no requirement by itself. This tool cannot verify that the use is truly decorative.
Important: role assignment is a user claim, not something this arithmetic can observe. Inactive controls, logotypes, browser-default controls, essential presentation and other exceptions require contextual review.