A palette grid compares colors. An interface adds context: which colors touch, what identifies a control, and whether a link looks like a link. Follow these examples to turn a numerical result into a design decision.
The grid opens on our separate Blogspot tool site. Enter the listed hex colors there to reproduce each calculation.
Three contrast checks a palette alone cannot finish
Try these palettes in the grid, then apply the result to the element you are designing. Each example assumes opaque sRGB colors on a flat background. Ratios below are displayed to six decimal places; decisions use the unrounded calculation.
1. A button has more than one color relationship
Imagine a “Continue” button with a 16 CSS px, regular-weight label. Its label is #222222, its fill is #EEEEEE, and the page is #FFFFFF. A proposed border is #767676.
Palette to enter:
Label #222222
Fill #EEEEEE
Page #FFFFFF
Border #767676
- Label against fill: 13.712779:1. This meets the 4.5:1 AA threshold for normal text.
- Fill against page: 1.160230:1. The pale rectangle does not reach 3:1.
- Proposed border against page: 4.542225:1; against fill: 3.914933:1. Both exceed 3:1.
Decision: Keep the readable label. If the rectangle is needed to identify the control in its actual context, give it the proposed contrasting border. A text pass does not answer that non-text question. These are different comparisons, not competing thresholds for the same pair.
Important limit: WCAG does not require a contrasting border on every button. If visible content or context already identifies the control, its decorative boundary may not need 3:1. Evaluate which visual information is actually necessary. A keyboard-focus indicator and the component’s other states still need separate review.
Use the grid: Select Normal and AA for the label. Read the numerical ratios for the boundary comparisons; the tool’s text pass/fail badge does not assess SC 1.4.11.
Sources: W3C: Contrast (Minimum); W3C: Non-text Contrast, boundaries.
2. Muted text can display “4.50” and still fail
A 14 CSS px, regular-weight “Updated yesterday” label uses muted green-gray #6F7975 on #FFFFFF. It is ordinary informational text, so the normal-text AA threshold applies.
Palette to enter:
Muted #6F7975
Alternative #707070
Page #FFFFFF
The muted pair computes to approximately 4.498983:1. Rounding to two decimal places produces 4.50, but the underlying value is below 4.5. It fails this text contrast requirement. Small print does not become exempt because it is secondary.
Revision: Replace the muted green-gray with neutral #707070. Against the same white surface, the ratio is 4.952144:1, above 4.5. This changes the hue as well as the brightness; it is an example replacement, not a claim to find the closest possible color.
Use the grid: Leave Normal and AA selected. The first pair should fail and the replacement should pass. Export CSV or JSON to inspect the calculated value beyond the rounded grid label. Do not switch to Large merely to obtain a pass; that setting does not resize the label.
A numerical pass does not guarantee comfortable reading. Inspect the actual font, weight, size and rendering rather than aiming for the smallest possible margin.
Source: W3C: Contrast (Minimum), threshold comparisons and text rendering.
3. A readable blue link can still be hard to identify
In a 16 CSS px paragraph, body text is #333333 and inline links are #005FCC on #FFFFFF. The links have the same font and weight as the paragraph and no underline or other distinguishing cue.
Palette to enter:
Body #333333
Link #005FCC
Page #FFFFFF
- Link against page: 5.984935:1, above the normal-text AA threshold.
- Body against page: 12.634654:1, also above that threshold.
- Link against body: 2.111076:1, below the 3:1 lightness distinction described by W3C’s G183 technique.
Decision: Keep the readable colors and add a persistent underline to inline links, using the link’s text color. The underline identifies the link without requiring someone to distinguish blue from gray. Leave that cue visible before interaction, not only on hover.
Current G183 allows a 3:1 contrast difference from surrounding text as a sufficient lightness distinction; it does not say every link must be underlined. This example does not meet that route. A persistent underline is the simpler recommendation here. Link text must still contrast with its background.
Use the grid: Check both text-to-page pairs, then read the Link/Body numerical ratio separately. Neither the Normal/AA nor Large/AA badge can establish whether a rendered link has the necessary visual identification. Also test real keyboard focus, visited styling and link behavior.
Sources: W3C: Use of Color; W3C: G183, distinguishing inline links; W3C: G182, additional visual cues.
Scope: These examples check selected color relationships, not whole-page WCAG conformance or accessibility certification. The grid does not inspect semantics, interaction, focus visibility, target size, images, transparency, gradients or actual rendered states. Verify the final interface as well as the palette. W3C’s Understanding documents and techniques explain the standard; the success criteria are in WCAG 2.2.
Examples and primary references checked October 8, 2026.