Accessibility

Contrast pairs

Contrast ratio for text and backgrounds from the Awaio palette. AA needs 4.5:1 for body text. Large text (24px, or 19px SemiBold) and UI parts such as icons and borders need 3:1.

• Aa Book your desk in seconds.
  19.4:1 AAA

  Neutral 950 on White

  #100D09 / #FFFFFF

• Aa Book your desk in seconds.
  5.1:1 AA

  Neutral 500 on White

  #776C62 / #FFFFFF

• Aa Book your desk in seconds.
  2.5:1 Fail

  Neutral 400 on White

  #AEA398 / #FFFFFF

• Aa Book your desk in seconds.
  5.4:1 AA

  Desk Plant on White

  #007A44 / #FFFFFF

• Aa Book your desk in seconds.
  1.9:1 Fail

  Awaio Green on White

  #00D97E / #FFFFFF

• Aa Book your desk in seconds.
  13.5:1 AAA

  Neutral 800 on Neutral 100

  #2B2521 / #F5F1ED

• Aa Book your desk in seconds.
  10.4:1 AAA

  Neutral 950 on Awaio Green

  #100D09 / #00D97E

• Aa Book your desk in seconds.
  1.9:1 Fail

  White on Awaio Green

  #FFFFFF / #00D97E

• Aa Book your desk in seconds.
  5.4:1 AA

  White on Desk Plant

  #FFFFFF / #007A44

• Aa Book your desk in seconds.
  4.4:1 Large text only

  Desk Plant on Glass Green

  #007A44 / #CCF1D9

• Aa Book your desk in seconds.
  5.2:1 AA

  White on Expo Violet

  #FFFFFF / #6D4AFF

• Aa Book your desk in seconds.
  6.9:1 AA

  Ink Cartridge on Lavender Sticky

  #4A2EC9 / #ECE7FF

• Aa Book your desk in seconds.
  7.4:1 AAA

  Neutral 950 on Orange Highlighter

  #100D09 / #FF7A1A

• Aa Book your desk in seconds.
  2.6:1 Fail

  White on Orange Highlighter

  #FFFFFF / #FF7A1A

• Aa Book your desk in seconds.
  4.7:1 AA

  Leather Binder on Manila Folder

  #B5470A / #FFEBDB

• Aa Book your desk in seconds.
  19.4:1 AAA

  White on Neutral 950

  #FFFFFF / #100D09

• Aa Book your desk in seconds.
  10.4:1 AAA

  Awaio Green on Neutral 950

  #00D97E / #100D09

• Aa Book your desk in seconds.
  7.8:1 AAA

  Neutral 400 on Neutral 950

  #AEA398 / #100D09

Rules

Body text

At least 4.5:1 against its background.

Large text

At least 3:1 for text from 24px, or from 19px in SemiBold.

Icons and UI

At least 3:1 for icons, input borders and focus rings that carry meaning.

Green text

Use Desk Plant #007A44 for green text and links on light backgrounds. Awaio Green #00D97E is for fills, icons and large shapes.

Text on color

Dark text on Awaio Green and Solar Orange, never white. White text on Desk Plant, Expo Violet and dark backgrounds.

Status

Never show status with color alone. Pair it with an icon or a label.

Beyond color

Focus

Every link, button and field shows a visible focus ring when reached by keyboard.

Alt text

Describe what an image shows and why it is there. Decorative images get empty alt text.

Touch targets

At least 44 by 44px on touch screens.

Motion

Respect reduced motion settings. Never use flashing or fast blinking content.

Real text

Do not put text in images. Real text scales, translates and works with screen readers.

Links

Link text says where it goes. Avoid "click here" and "read more" on their own.