Versions Compared

Old Version 4

changes.mady.by.user Adam Butterworth (Deactivated)

Saved on

compared with

New Version 5

changes.mady.by.user Jeff Witt (Deactivated)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Quick Overviews on Common Topics

...

  • Text should be legible

  • Interactive things should be noticeable (stand off background)

    • 3:1 contrast should exist in all states of a component.

    Remember to design all the states

  • Don’t Rely on Color Alone When Providing Important Information

    • There are millions of “color blind” people

    • There are other millions of people who have other vision impairments that affect color perception

  • Consider whether a Dark and Light version will ever be needed

    • We don’t have a Dark Mode, but having Light and Dark pairs is a step in that direction.

  • Avoid embedding text in images

    • The user can’t use their own tools to remap the colors for better contrast

Expand
titleDetails

Legible text

  • 4.5:1 contrast minimum for normal text

  • 3:1 for 2em text

  • 3:1 for 1.5em text that is also bold

  • Don’t use brand red on a dark (elm) background unless it is large.

Contrast checking tools:

https://webaim.org/resources/contrastchecker/

https://webaim.org/resources/linkcontrastchecker/

Frequently, in Chrome’s Dev Tools, you can just click on a color in the CSS panel to get the contrast value vs. background.

Image Added

Interactive things should be noticeable (stand off background). This means the edges generally need a minimum 3:1 luminance contrast vs. background.

  • Remember that background won’t always be white or black

  • Tinted backgrounds don’t cost much in contrast but do move the bar for success

3:1 contrastRemember to design all the states. States you should think about when designing:

  • default

  • hover

  • selected

  • Unselectedunselected

  • error

  • focus

  • active (list controls, interactive tables)

  • 3:1 contrast not necessary in disabled state BTW beware (they can effectively disappear)

  • Beware inadvertently using disabled Disabled styling when
    you intended Inactive or Unselected

  • Remember to design all the states

Don’t Rely on Color Alone When Providing Important Information

Reversing foreground and background colors is an exception here.

Consider whether a Dark and Light version will ever be needed

Avoid embedding text in images

The user can’t use their own tools to remap the colors for better contrast

...

2. Text should flow

  • Change viewport width up to 1920 and down to 320. It should still be readable.

  • Line length is a usability issue but affects some people who have reading disabilities

...