Every brand colour the app draws text or a control edge on, measured against WCAG 2.1: 4.5:1 for body text, 3:1 for large text and non-text. Colours are read out of the Swift source at run time, and semi-transparent ones are composited onto the surface behind them first, because a rule at 8.5% opacity is not a 10:1 colour, it is whatever it becomes on the page.
| What a person sees | Foreground | Behind it | Measured | Verdict |
|---|---|---|---|---|
| Reading window, cream | ||||
| Body text on the page | #1A1714 | #FCF9F5 | 17.00:1 | PASS needs 4.5:1 |
| Text on a highlighted wordThe highlight sits under the word being spoken. | #1A1714 | #F2D6C2 | 12.88:1 | PASS needs 4.5:1 |
| Text outside the spoken sentence (64% ink)The document, not decoration: people read ahead and back in it. | #6B6865 | #FCF9F5 | 5.25:1 | PASS needs 4.5:1 |
| Ruled line on the pagePure decoration. | #E9E6E2 | #FCF9F5 | 1.19:1 | EXEMPT needs 3.0:1 |
| Margin rulePure decoration. | #EFCAB1 | #FCF9F5 | 1.45:1 | EXEMPT needs 3.0:1 |
| Page edgePure decoration. | #E5E2DF | #FCF9F5 | 1.23:1 | EXEMPT needs 3.0:1 |
| Reading window, slate | ||||
| Body text on the page | #E8E6E0 | #191B1A | 13.87:1 | PASS needs 4.5:1 |
| Text on a highlighted word | #E8E6E0 | #59351C | 8.69:1 | PASS needs 4.5:1 |
| Text outside the spoken sentence (56% ink) | #8D8D89 | #191B1A | 5.18:1 | PASS needs 4.5:1 |
| Ruled line on the pagePure decoration. | #303130 | #191B1A | 1.33:1 | EXEMPT needs 3.0:1 |
| Margin rulePure decoration. | #6F3E1C | #191B1A | 1.95:1 | EXEMPT needs 3.0:1 |
| Settings sidebar | ||||
| White glyph on the Dictation tileThe row's text label is what identifies it; the glyph repeats it. Exempt, but a glyph nobody can see is still a poor glyph. | #FFFFFF | #EB6F3B | 3.06:1 | PASS needs 3.0:1 |
| White glyph on the Modes tileThe row's text label is what identifies it; the glyph repeats it. Exempt, but a glyph nobody can see is still a poor glyph. | #FFFFFF | #D95973 | 3.73:1 | PASS needs 3.0:1 |
| White glyph on the Translation tileThe row's text label is what identifies it; the glyph repeats it. Exempt, but a glyph nobody can see is still a poor glyph. | #FFFFFF | #339E73 | 3.34:1 | PASS needs 3.0:1 |
| White glyph on the Licence tileThe row's text label is what identifies it; the glyph repeats it. Exempt, but a glyph nobody can see is still a poor glyph. | #FFFFFF | #BA8D17 | 3.03:1 | PASS needs 3.0:1 |
| White glyph on the Instructions tileThe row's text label is what identifies it; the glyph repeats it. Exempt, but a glyph nobody can see is still a poor glyph. | #FFFFFF | #6B5CC7 | 5.28:1 | PASS needs 3.0:1 |
| Milestone badge | ||||
| Ember on a dark card | #CC8A5F | #0C121C | 6.58:1 | PASS needs 4.5:1 |
| Ink on a light card | #1B1E24 | #FCFBF8 | 16.11:1 | PASS needs 4.5:1 |
| Keyboard guide | ||||
| Translation key tint on a light panePosition and a text label also distinguish it, so 1.4.1 is met regardless. | #9333C4 | #F5F5F7 | 5.49:1 | PASS needs 3.0:1 |
Regenerate with
python3 scripts/contrast-audit.py --html docs/contrast-audit.html