- Article
- 2 minutes read
- Reviewed August 4, 2026
Colour and typography influence whether content can be perceived and read.
An attractive palette can still create barriers when text, controls or focus states do not have enough contrast.
Text Contrast
WCAG defines minimum contrast requirements for normal text and large text.
Test the actual foreground and background colours, including hover, disabled, error and placeholder states.
Do not assume a brand colour is suitable for small text simply because it looks strong on a white design board.
Non-Text Contrast
Controls, focus indicators and meaningful graphic boundaries also need sufficient contrast.
Review:
- Form borders.
- Toggle states.
- Icons.
- chart lines.
- focus outlines.
- selected navigation.
- error indicators.
Do Not Use Colour Alone
Colour can reinforce meaning but should not be the only signal.
Add text, icons, patterns or programmatic state for errors, required fields, active steps and chart categories.
Typography
Accessible typography considers:
- Readable typefaces.
- Appropriate text size.
- Line height.
- Paragraph spacing.
- Line length.
- Letter spacing.
- Clear distinction between characters.
- Responsive reflow.
Avoid long all-caps text and overly light font weights.
Zoom and Reflow
Test browser zoom and enlarged text.
Content should reflow without horizontal scrolling in normal reading contexts. Navigation, dialogs and sticky elements must not obscure the page.
User Preferences
Respect operating-system and browser preferences where possible, including high contrast, forced colours, dark mode and reduced motion.
Custom colours should not remove visible focus or make text disappear under forced-colour modes.
WordPress Design Systems
Themes and theme.json can define colour and typography presets.
Limit editor choices to tested combinations instead of exposing every possible foreground and background pair.
Frequently Asked Questions
Is automated contrast testing enough?
It verifies numeric combinations but cannot determine whether every meaningful boundary or state is clear.
Can placeholder text replace a label?
No. Placeholders disappear and often have weak contrast.
Continue Learning
Previous: [Alternative Text for Images](/resources/wordpress-manual/accessibility/alternative-text-images/)
Next: [Keyboard Navigation and Focus](/resources/wordpress-manual/accessibility/keyboard-navigation-focus/)