Style panel

​​Instructions for understanding content and accomplishing tasks shouldn’t rely solely on characteristics like shape, color, size, visual location, orientation, or sound.

People with low vision use zoom to scale content, sometimes up to 400%. As they zoom, content should reflow vertically (as a column) and remain fully legible and logical without a need for horizontal scrolling.

Some users mount devices in a fixed orientation (e.g., on the arm of a wheelchair). Make sure your content doesn’t restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.

All borders need a contrast ratio of at least 3.0:1 against their backgrounds. This includes borders on actionable elements like text inputs, radio buttons, and checkboxes.

Icons need a contrast ratio of at least 3.0:1 against background colors.

Text should have sufficient contrast against its background to be readable.

Text that overlaps images or videos needs sufficient contrast against the background to be fully legible. Images and videos with busy backgrounds make text difficult to read.

Keyboard users navigate a site by tabbing through actionable items on a page, and focus states indicate which item is being focused.

You can communicate that people can interact with an element by changing how it looks and behave in different states.

Make sure touch controls like hamburger menus, social icons, gallery viewers, etc. are usable by a wide range of hand and stylus sizes. This doesn’t include footnotes or icons in or at the end of a sentence.

People with low vision sometimes resize text larger than the 16px default. When we set font sizes in absolute units, like px, the page doesn’t always respect the user’s preference and instead shows the text at the font-size authored.

We shouldn’t rely solely on color to convey information, indicate an action, or distinguish a visual element. This makes it impossible for people who are blind, visually impaired, or who don’t easily distinguish colors to access this information.

Designing text for readability and legibility are essential to a successful user experience. Appropriate text sizing and spacing ensure that visually-impaired people can read important text, and help those with cognitive disabilities to better focus on text blocks.

Most of the time, content that’s not visible on the screen should also be hidden from keyboard and screen readers. This means that hidden content should not be focusable. For example, an inactive modal shouldn’t be focusable.