Skip to content

Latest commit

 

History

History
136 lines (133 loc) · 7.9 KB

contraste.md

File metadata and controls

136 lines (133 loc) · 7.9 KB
Raw

voltar ao sumário

6. Contraste

Lista de verificação de contrastes
verifique se: sim não n.a
a) para texto com tamanho normal, o rácio de contraste entre a cor do texto e a cor de fundo é superior a 4,5:1?
b) para texto com tamanho grande, o rácio de contraste entre a cor do texto e a cor de fundo é superior a 3:1?

Contrast ratio ("color contrast")

Some people cannot read text if there is not sufficient contrast between the text and background, for example, light gray text on a light background.

Figure: Gray text on light background.

High contrast (for example, dark text on light background or bright text on dark background) is required by some people with visual impairments, including many older people who lose contrast sensitivity from ageing.

Figure: Dark text on light background, and yellow text on black background.

While some people need high contrast, for others — including some people with reading disabilities such as dyslexia — bright colors (high luminance) are not readable. They need low luminance.

Figure: Brown text on dark background, and dark text on medium brown background.

Web browsers should allow people to change the color of text and background, and web pages need to work when people change colors.

(This accessibility requirement is sometimes called sufficient "color contrast"; however, that is incorrect — technically it's "luminance contrast". On this page we use "contrast ratio" as short for "luminance contrast ratio" because it's less jargony.) There is much more to know about contrast; we've just introduced the basics here.

What to check for:

Web pages should also have a minimum contrast by default: a contrast ratio of at least 4.5:1 for normal-size text.

There are basically three ways to check contrast, each with strengths and weaknesses.

  1. Table with contrast ratio - The tool displays a table with all the possible contrast ratios in the web page. With some tools, you can click in the table and it will show where that color combination is in the web page.
    • Pro: Comprehensive.
    • Con: Can be inaccurate, specifically, it can show some color combinations that are not really in the displayed page.
  2. Eye-dropper to select colors - The tool lets you select a text color and a background color, then it shows you the contrast ratio.
    • Pro: Accurate.
    • Con: Can only test one item at a time. Need to be able to see and use a mouse.
  3. Turn off color. The tool shows the page in grayscale.
    • Pro: Gives you direct experience.
    • Con: Imprecise, does not provide contrast ratio value.

Contrast checks

Below are instructions for checking contrast with IE WAT; a list of other contrast analyzer tools is in the Related Resources section of Understanding Success Criterion 1.4.3.

To check contrast with IE WAT

Here's how to do the three checks for sufficient contrast described above.

  1. Table with contrast ratio:
    • In the toolbar, select Color > Juicy Studio Luminosity Analyser. Or, with the keyboard: Ctrl/cmd+Alt+5, then down arrow to "Juicy Studio Luminosity Analyser".

      A new window opens titled Colour Contrast Analyser with the table of results. The last column is Luminosity Contrast Ratio.
  2. Eye-dropper to select colors:
    • In the toolbar, select: Color > Contrast Analyser [application]. Or, with the keyboard: Ctrl+Alt+5, then down arrow to "Contrast Analyser [application]".
      The Color Contrast Analyser application window opens.
    • Using the first eye-dropper icon from the foreground color section, pick the foreground color (usually the text) you want to analyze.
    • Using the second eye-dropper icon from the background color section, pick the corresponding background color.
    • In the bottom of the Color Contrast Analyser window, the resulting luminosity Contrast ratio will show (for example: 7.5:1), along with "Pass" or "Fail" and a visual example of the colors.
  3. Turn off color:
    • In the toolbar, select Color > Grey Scale. Or, with the keyboard: Ctrl+Alt+5, then down arrow to "Gray Scale".
    • Check if any information is lost or hard to see when all colors are converted to grayscale.

Checking contrast with other browsers

There is not an easy way to check contrast with the WebDev toolbar. There is a Juicy Studio Accessibility Toolbar add-on that provides the same information as IE WAT above and works with Firefox.

To practice checking contrast with BAD

Open the inaccessible Tickets page: www.w3.org/WAI/demos/bad/before/tickets
Use one of the checks above. Notice:

  • The text in some rows is dark gray on light gray with a contrast ratio of 3.76:1.

Learn more about contrast ratio