Accessibility
For designers
Section titled “For designers”Accessibility compliance for Toyota:
| Type | Fill Colour | Bg Colour | Contrast Ratio | Passes WCAG AA? |
|---|---|---|---|---|
| Muted | #A8AAAC | #FFFFFF | 2.33:1 | ✅ Yes |
| Contrast | #E4E4E4 | #FFFFFF | 1.27:1 | ✅ Yes |
| Red | #FF0022 | #FFFFFF | 3.98:1 | ✅ Yes |
| Blue | #0072F0 | #FFFFFF | 4.5:1 | ✅ Yes |
For developers
Section titled “For developers”Semantic markup
Section titled “Semantic markup”- Use
<hr>for horizontal dividers that represent a thematic break or section separation. Screen readers announce it as a “separator”. - For vertical or purely decorative dividers, use a
<div>withrole="separator"so assistive technologies can identify the boundary. - If a divider is purely cosmetic (e.g. a border between navigation links), use
role="presentation"oraria-hidden="true"to remove it from the accessibility tree.