Örnek Kahve Co. — colour usage guide
Accessible palette v1.0 · WCAG 2.2 AA (AAA where noted) · prepared by Ali Karabüyük · tokens: accessible-color-palette-tokens.json / .css
1. Brand colours — unchanged, but with a job description
- Brand orange
#F28C28logo, illustration, large fills with dark text - Brand teal
#2EC4B6decorative accents only - Brand yellow
#FFD166highlight backgrounds, dark text only - Cream
#FFF8F0section background
2. Working colours (semantic tokens, light mode)
- action
#AC5D00buttons, CTA - link
#944F00links in text - text
#3E312Abody text - text-muted
#846C60secondary text - accent
#006D65secondary button, accent headings - error
#911B12error + ✕ icon - success
#007F76success + ✓ icon - focus
#00544Efocus ring outer
3. Five rules
- Text uses only approved pairings (table below). Never put text in brand orange, teal or yellow on white.
- White text needs
action(orange-600, 4.86:1), not brand orange (2.45:1). On brand orange or yellow, text ison-brand(neutral-950). - Never colour alone (1.4.1): every error/success carries an icon and the words “Hata:” / “Tamam:”; links in body text are underlined.
- Focus is always visible: 2px inner
focus-inner+ 3px outerfocusring, 2px offset (≥3:1 against page, section and button). - Disabled ≠ low-contrast content. Disabled controls are exempt from 1.4.3, but must also be marked
disabledin code.
4. UI states
Hata: Kart numarası geçersiz.
Tamam: Siparişiniz alındı.
5. Approved text pairings — light mode (WCAG 1.4.3 / 1.4.6)
| Use | Tokens | Ratio | Level |
|---|---|---|---|
| Body text | Aatext on bg | 12.52:1 | AAA |
| Body text on section bg | Aatext on bg-subtle | 11.88:1 | AAA |
| Secondary text | Aatext-muted on bg | 4.89:1 | AA |
| Secondary text on section bg | Aatext-muted on bg-subtle | 4.64:1 | AA |
| Link | Aalink on bg | 6.22:1 | AA |
| Link on section bg | Aalink on bg-subtle | 5.90:1 | AA |
| Primary button label | Aaon-action on action | 4.86:1 | AA |
| Button label (hover) | Aaon-action on action-hover | 6.22:1 | AA |
| Button label (pressed) | Aaon-action on action-pressed | 8.84:1 | AAA |
| Secondary button / accent heading | Aaaccent on bg | 6.22:1 | AA |
| Promo banner text on brand yellow | Aaon-brand on brand-yellow | 11.03:1 | AAA |
| Hero/badge text on unchanged brand orange | Aaon-brand on brand-orange | 6.48:1 | AA |
| Error message | Aaerror on bg | 8.86:1 | AAA |
| Error banner | Aaerror on error-bg | 8.34:1 | AAA |
| Success message | Aasuccess on bg | 4.89:1 | AA |
| Success banner | Aasuccess on success-bg | 4.61:1 | AA |
6. Non-text contrast — light mode (WCAG 1.4.11, focus 2.4.13)
| Use | Tokens | Ratio | Level |
|---|---|---|---|
| Input border vs page | border-input on bg | 3.21:1 | Pass (≥3:1) |
| Input border vs section | border-input on bg-subtle | 3.04:1 | Pass (≥3:1) |
| Button shape vs page | action on bg | 4.86:1 | Pass (≥3:1) |
| Secondary button border | accent on bg | 6.22:1 | Pass (≥3:1) |
| Focus ring vs page (1.4.11, 2.4.13) | focus on bg | 8.83:1 | Pass (≥3:1) |
| Focus ring vs section | focus on bg-subtle | 8.38:1 | Pass (≥3:1) |
| Focus ring vs muted surface | focus on surface-muted | 7.66:1 | Pass (≥3:1) |
| Inner focus ring vs primary button | focus-inner on action | 4.86:1 | Pass (≥3:1) |
| Outer vs inner focus ring | focus on focus-inner | 8.83:1 | Pass (≥3:1) |
| Error icon / field border | error on bg | 8.86:1 | Pass (≥3:1) |
| Success icon | success on bg | 4.89:1 | Pass (≥3:1) |
7. Dark mode
Body text on the dark page, with a link and secondary text.
| Use (dark) | Tokens | Ratio | Level |
|---|---|---|---|
| Body text | Aatext on bg | 14.96:1 | AAA |
| Body text on section bg | Aatext on bg-subtle | 11.78:1 | AAA |
| Secondary text | Aatext-muted on bg | 8.56:1 | AAA |
| Secondary text on section bg | Aatext-muted on bg-subtle | 6.74:1 | AA |
| Link | Aalink on bg | 8.51:1 | AAA |
| Link on section bg | Aalink on bg-subtle | 6.70:1 | AA |
| Primary button label | Aaon-action on action | 6.36:1 | AA |
| Button label (hover) | Aaon-action on action-hover | 8.51:1 | AAA |
| Button label (pressed) | Aaon-action on action-pressed | 11.35:1 | AAA |
| Secondary button / accent heading | Aaaccent on bg | 8.57:1 | AAA |
| Promo banner text on brand yellow | Aaon-brand on brand-yellow | 11.03:1 | AAA |
| Hero/badge text on unchanged brand orange | Aaon-brand on brand-orange | 6.48:1 | AA |
| Error message | Aaerror on bg | 6.36:1 | AA |
| Error banner | Aaerror on error-bg | 6.32:1 | AA |
| Success message | Aasuccess on bg | 13.82:1 | AAA |
| Success banner | Aasuccess on success-bg | 13.73:1 | AAA |
8. Colour-vision check of status colours
Error red-800 and success teal-600 were picked from the scales to keep the largest difference under simulated protanopia, deuteranopia and tritanopia (minimum CIEDE2000 27.28, before: 11.64). Success uses the brand-teal family (bluish green) instead of a pure green — that hue shift, not lightness, does most of the work: their lightness ratio (1.81:1) is about the same as before (1.82:1). Colour is still a secondary cue — the icon and the words carry the meaning.
9. Limits
Contrast ratios do not capture font weight, size, thickness or anti-aliasing; small or thin text may need more than the minimum. CVD simulation is a model (Machado 2009, full dichromacy) and is not a substitute for testing with people. APCA values in the matrices are informative and not part of WCAG 2.2. Brand acceptance of the darker working colours is the client's decision.