Contrast table
Juniper Yarn Co, 'October restock'. Ratios computed by script with the WCAG relative luminance formula (sRGB channels linearized, L = 0.2126 R + 0.7152 G + 0.0722 B, ratio = (lighter + 0.05) / (darker + 0.05)); that implementation is mine. px to pt uses 1pt = 1.333px (my conversion). WCAG 1.4.3 asks for a "contrast ratio of at least 4.5:1", or 3:1 for large text, which it defines as "18 point text or 14 point bold".
| Block | Text | Size | Weight | Text hex | Background hex | Ratio | Large text | Threshold | Result |
|---|---|---|---|---|---|---|---|---|---|
| T1 | 'Back in stock: Merino DK' | 28px (21pt) | bold | #FFFFFF | #E8A87C | 2.03:1 | yes | 3:1 | fail |
| T2 | body 'Twelve colors are back, including Fog and Moss.' | 16px (12pt) | normal | #777777 | #FFFFFF | 4.48:1 | no | 4.5:1 | fail |
| T3 | footer 'Unsubscribe | Preferences' | 12px (9pt) | normal | #AAAAAA | #F5F5F5 | 2.13:1 | no | 4.5:1 | fail |
| T4 | button 'Shop Merino DK' | 18px (13.5pt) | bold | #FFFFFF | #2E5E4E | 7.43:1 | no | 4.5:1 | pass |
Alt text
Checked against the W3C alt decision tree.
| Image | What it is (your words) | Alt now | Role in the tree | Issue | Result |
|---|---|---|---|---|---|
| I1 | logo, black text on transparent PNG, links to homepage | 'logo' | functional (link) | alt should name the destination, for example the brand name or homepage | flag |
| I2 | photo of yarn skeins in Fog and Moss | '' | informative | empty alt hides the photo; alt should carry its information | flag |
| I3 | decorative leaf divider | 'leaf divider image' | decorative | decorative images use empty alt | flag |
Suggested alt, from your input only: I1 [ADD: brand name as it should be read, for example 'Juniper Yarn Co' if that is the logo text]; I2 'Merino DK yarn skeins in Fog and Moss'; I3 empty alt ("Use an empty alt attribute", per the W3C tree for decorative images).
Links
| Link | Visible text | Result |
|---|---|---|
| L1 | 'Shop Merino DK' | ok |
| L2 | 'click here' | flag: does not say where it goes (my note) |
| L3 | 'Unsubscribe' | ok |
Suggested L2 text: [ADD: the pattern's name], for example 'Get the [pattern name] pattern'.
Dark mode test list
These are tests to run, not results. Litmus describes clients that do a partial invert and others where "Full Color Invert is the most invasive"; which client does what changes over time, so check in your preview tool.
| Test | Elements | Risk | Check |
|---|---|---|---|
| D1 | I1 | black text on a transparent PNG; on a dark background the text may disappear | test in partial and full invert clients |
| D2 | T2, T3 | light backgrounds set as hard coded hex; inverting clients may change them | test that text stays readable |
| D3 | T1, T4 | colored backgrounds with white text | test that colors and contrast hold after invert |
Counts
| Finding type | Count |
|---|---|
| Contrast | 3 |
| Alt text | 3 |
| Link text | 1 |
| Dark mode test item | 3 |
| All findings and test items | 10 |
| Distinct elements involved | 8 |
Distinct elements: I1, I2, I3, L2, T1, T2, T3, T4.
Questions for you
- What text does the logo (I1) show?
- What is the pattern called that L2 links to?
- Which preview tool and clients do you use for dark mode checks?
Needs your decision
- Approve the alt and link changes, and pick new colors for the failing blocks T1, T2 and T3, before the live template changes or a test is sent. I recheck any new hex pair by script.
- [ADD: logo text], [ADD: pattern name], [ADD: new hex values for T1, T2, T3].