Accessibility

Make the product suitable for all users, including those with limited possibilities.

Keep minimal contrast ratio

W3C recommends keeping the contrast ratio minimal.

  1. Big text at 3:1 (14px for bold, 18px and higher for regular)
  2. Small text at 4.5:1
Do
Good color contrast.
Don't
Bad color contrast.

Preserve consistent alignment

Content consistency, alignment.

Do
Show consistent information flow to the user. Preserve consistent alignment.
Don't
Сontrol elements mixed with content, paragraphs broken.

Don’t mix

Create readable content. Place control elements, so to make clear what they affect.

Do
Group elements, build a clear hierarchy.
Don't
Hard to read data, no hierarchy.