Planning Responsibilities

1. Because perceived contrast, and therefore readability, is tightly connected to font weight and font size. it is important to plan your CSS styles to provide predictable and consistent size and weight for the target display(s).
   • This is particularly important for responsive designs that resize or reconfigure to different device resolutions.
   • While designers are free to use any size units such as em, vw, calc(), etc., it is important for the calculated sizes as rendered meet or exceed the size values listed as px in the visual contrast chart.
   • For non-standard fonts, compare the relative x height to the x height of a standard reference font, and adjust the font-size value for a match.
2. The design of each font also plays a significant part in readability and perceived contrast. When planning, selected fonts should be compared against the standardized fonts in the visual contrast matrix.
3. The available useable colors to achieve readable visual contrast is largely constrained by font weight & font size. Alternately if a specific color palette is required, the color palette may limit the minimum font weight & size.
4. The needs of font weight, size, and color extends to readable text content in images.
   • The colorspace standard for web content is sRGB. Images with other profiles may give unpredictable results.
   • Plan to get images early in the design process so they can be evaluated and adjusted if needed
   • A suggested best practice is to use textless versions of images and CSS compositing techniques to apply dynamic text over the image.

Tips for Collaboration

The planning and design phases will often be very interactive, and it is important to maintain communication and understanding of the available range of colors, sizes, and weights early in the process to allow adjustments to meet design goals and client needs.

Planning for Each Stage

Consider early design wireframes and the space allocated for various elements, and how this will affect the desired font size in the final design.

Determine early on if the site will be responsive, to dynamically adjust and work on all device sizes, or if it will use a mobile separate paradigm. This choice will significantly affect font weight & size.

To simplify early planning, remember that smaller and thinner (light weight) fonts require greater contrast between the font color and the background. Conversely, a lower contrast can be used with larger and thicker fonts.

Design responsibilities

• Smaller, lighter weight fonts require higher contrast colors.
• The CSS properties -webkit-font-smoothing: or -moz-osx-font-smoothing should be set to auto (default), and not antialiased(webkit), and not greyscale(moz).
  • This is especially true for normal weight fonts less than 24px, and light fonts less than 48px.
  • The antialiased mode in font smoothing is actually a blending that reduces perceived lightness contrast by Lc 30 or more.
  • If the faux antialiasing mode is to be used, take note that normal and thin fonts may need to have their CSS colors adjusted to increase contrast.
• Certain color combinations can be very problematic on a computer monitor or mobile device.
  • Never rely on hue alone for differentiating details. Adequate luminance contrast is required.
  • The green in a monitor makes up the vast majority of luminance (light), so it will usually be a significant part of the lighter colors.
  • Pure blues should typically be the darkest of two colors
    • To use blue as the lighter of two colors, green needs to be added, otherwise there will be insufficient contrast and poor readability.
    • This is both due to the low contrast and due to the human eye seeing blue at a lower resolution than green and red.
    • The nature of blue light causes it to focus at a different location on the retina than red, so a pure red and a pure blue may shimmer when next to each other.
    • In the example below: Left, pure red (#F00) and a pure blue (#00D). Right, an equal amount of blue was added to the background which removes all detail from the blue channel.
      
      BG #F00 TEXT #00D
      BG #E0D TEXT #00D
    • For many people, reducing or avoiding details in the blue channel can prevent chromatic aberration or shimmer.
  • Pure red (#F00) text on a pure black (#000) background is not useful for readability. While standard vision may see it if the font is large enough, some types of color insensitive vision will not.
  • In the example below: Left, pure red (#F00) on black (#000). Right, a simulation of how a person with protanopia sees it.
    
    STANDARD VISION
    PROTANOPIC VISION
  • Different font designs affect perceived contrast and readability.
    • While different font families use weights such as 400 or 700, those are not standardized in terms of contrast.
    • Different families also vary in terms of x-height, so a 16px font in one family may be smaller or larger than a 16px font in another.
    • Other font design attributes also create inconsistent perceived contrast between families.
    • It is useful to visually compare a font family against the standard fonts used in the visual contrast matrix and take note of the differences in size, weight and the perceived contrast.
  • When placing text in a container with a significantly different background color than the overall page, it is typically necessary to add padding around the text, so the eye can locally adapt to the text and container background.
  • Line spacing and letter spacing (leading and tracking), line length, and effects such as transparency and shadow all have an effect on perceived contrast and readability.
  • Increasing letter spacing and line spacing can reduce crowding and improve readability contrast.
  • Readability is improved by limiting the number of characters per line of text to no more than 80 characters, with an ideal line length being between 45 and 65 characters.
  • Generally speaking, blocks or columns of text should be set to the highest contrast colors, especially for thin fonts.
  • Contrast can be reduced for big bold headlines to reduce glare.

Designer Tips

1. Keep in mind that web content is displayed on a wide variety of display types, devices, and resolutions. It is important to test how content renders on different browsers and systems.
   • If you normally work on a retina display it is particularly important to examine content on a normal display.
   • Different browsers and operating systems render content differently, especially features such as shadows and other effects.
   • Don't rely on developer mode, mobile emulation in a desktop browser, verify with different actual devices.
2. The sRGB colorspace is the standard for web content, and the standard for accessibility. This should be the default colorspace, and any other colorspaces should be a selectable user option.
3. Workspace is important. Variations in monitor calibration and ambient lighting will affect the final output. See the Develop Tab for details on workplace setup.

User Testing and Meaningful Involvement

The need for a beta period for testing designs with the input of end users cannot be understated. During planning, design, and development, familiarity with user interface controls may obscure elements that an end user finds non-intuitive. It is important to identify these stumbling blocks early in design.

In the context of visual contrast and readability, this includes features where the user can adjust color or theme, and where the user may want to adjust font size or line spacing on their end.

Technical Responsibilities

• Still to be developed. We will include this in a future working draft.

Technical Tips

1. Javascript, PHP, and other dynamic page scripts must maintain the proper contrast and weight and size ratios.
2. Ensure Javascript and other dynamic page scripts allow text to be scaled in size without breaking content, so that:
   • User can scale the smallest content text five times larger on a full sized desktop screen without breaking content nor requiring horizontal scrolling for any single text element or text block.
   • User can scale the smallest content text two times larger on a mobile device without breaking content nor requiring horizontal scrolling for any single text element or text block.
   • User can scale the smallest content text five times larger on a mobile device without breaking content but horizontal scrolling is permitted in this use case.
   • For all of the above, larger text does not have to increase by the scale amount, provided it remains larger than the smaller text that is scaled up.
3. Ensure CSS style sheets, and inline styles do not use artificial font smoothing, and smoothing remains at default or auto.
4. The sRGB colorspace is the standard for web content, and the standard for accessibility. This should be the default colorspace, and any other colorspaces should be a selectable user option.
5. The designer's workspace is important. Variations in monitor calibration and ambient lighting will affect the final output, often in unexpected ways.
   • Use a hardware calibrator such as an XRite Display, and use software to calibrate the monitor to the sRGB standard.
   • The ambient room lighting should be about 20% of the brightness of the monitor at peak white. For a monitor with a peak white of 160 cd/m², the ambient should be around 200 lux.
   • Put another way, setting the full screen to sRGB mid grey color #808080, the monitor should appear around the same brightness as the overall room lighting.
   • The color temperature of the room lighting should be 5500K, ideally with a CRI over 90.
   • Don't paint the walls 18% grey. Instead, paint the walls pure white and set the lighting level so the white walls approximate the monitor at #808080 grey.
   • And finally, avoid bright colors within the field of vision when looking at the monitor, as nearby colors can affect how you perceive the monitor content.