Accessibility and All Caps: What Designers Should Know

Uppercase text is popular in buttons, navigation and headings because it looks bold and structured. Used carelessly, it can make content harder to read for many users.

Readability

Lowercase words have distinctive outlines thanks to letters that rise above (b, d, k) and drop below (g, p, y) the line. In uppercase, every letter is the same height, so word shapes disappear. Readers must decode letter by letter, which slows reading, particularly in long passages.

Dyslexia and low vision

Many readability guidelines for people with dyslexia, including advice from the British Dyslexia Association, recommend avoiding text in capitals for continuous reading. People with low vision who use magnification also find long uppercase passages harder to follow.

Screen readers

Screen readers behave differently with capitals. Some may spell out short uppercase words letter by letter, especially if they resemble acronyms. A heading typed as "CONTACT US" may be read differently from "Contact us".

Best practice for designers and developers

1. Write text in normal case in the HTML and apply visual uppercase with CSS: text-transform: uppercase;. Assistive technology then reads the original words.
2. Keep uppercase short: labels, tabs and short headings only.
3. Increase letter spacing slightly for uppercase text, which improves legibility.
4. Never use uppercase for paragraphs, legal text or instructions.
5. Mark up real acronyms consistently and expand them on first use.

Fixing existing content

If your content was typed in capitals, convert it to sentence case with a case converter, then apply visual styling with CSS where needed. Your design keeps its look, and your content becomes more accessible.

Frequently asked questions

Is all caps bad for accessibility?

All caps accessibility is a real concern: long uppercase passages are harder to read, especially for people with dyslexia, and some screen readers spell short capitalized words out letter by letter.

Why is the readability of all caps lower?

The readability of all caps is lower because uppercase letters remove word shapes, the outlines that ascenders and descenders give lowercase words. Dyslexia friendly text uses sentence case, clear fonts and generous spacing; slightly increased letter spacing helps when you do use capitals.

How should I make text uppercase on a website?

Write the text normally and apply CSS text-transform uppercase (text-transform: uppercase) for the visual style. Screen readers then read the original words.