Jonathan Whiting WebAIM.org. Understanding and Evaluating WCAG Contrast Requirements

Transcription

1 Jonathan Whiting WebAIM.org Understanding and Evaluating WCAG Contrast Requirements

2 Democracy is the worst form of Government, except for all those other forms that have been tried.

3 Overview WCAG Requirements Text contrast Non-text contrast (WCAG 2.1) Use of Color Evaluate WebAIM Contrast Checker WAVE Colorzilla color picker Chrome DevTools Colour Contrast Analyser WebAIM Link Checker

4 Color contrast

5 Color contrast

6 Color contrast

7 Color Luminance contrast

8 Relative luminance contrast

9 Relative Luminance Pure red is hard to read Pure green is even worse Pure blue is pretty good

10 Relative Luminance

11 WCAG Contrast Formula (L ) / (L ) where L = * R * G * B where R, G, and B = R srgb <= then R = R srgb /12.92 else R = ((R srgb )/1.055) ^ 2.4 where R srgb < = R 8bit /255

12 Contrast ratio

13

14 Level AA Contrast Examples 4.5:1 3:1 Large text Gray (#767676) on White Purple (#CC21CC) on White Red (#F30000) on Yellow (#FFFF00) 18pt (24px) BOLD: 14pt (18.67px)

15 WebAIM Contrast Checker webaim.org/resources/contrastchecker/

16 Images of text

17 Exceptions

18 Incidental

19

20 Not visible to anyone

21 Logotypes

22 WAVE wave.webaim.org

23 Background color is the specified color of content over which the text is to be rendered in normal usage

24 Gradients and background images

25 For text displayed over gradients and background images, authors should ensure that sufficient contrast exists for each part of each character in the content.

26 Gradients and background images

27 For text displayed over gradients and background images, authors should ensure that sufficient contrast exists for each part of each character in the content.

28 We have the same contrast ratio

29

30 Outline/Halo Together?

31 3:1 Outline/Background

32 3:1 Halo/Text

33 1:1 Outline/Halo!

34

35

36 Colorzilla colorzilla.com

37 1.4.11: Non-text Contrast (WCAG 2.1) Level AA No Level AAA 3:1 contrast of: User Interface Components Including states (focus indicators, hover states, etc.) Graphical Objects

38 UI Boundaries I have read and agree to the Terms of Use

39 except when determined by user agent

40

41 UI States I have read and agree to the Terms of Use

42

43 Chrome Developer Tools

44 Graphical Objects

45

46

47 Exception: Required to understand

48 Icon with text?

49 Against adjacent color(s)"

50 Exception Essential

51 Twitter logo in site?

52 Non-HTML content

53 Colour Contrast Analyser 1. Download and install the Colour Contrast Analyser 2. Options > Show Colour sliders > check RGB and HSV 3. Use the Eyedropper to choose colors 4. Requirements :1 for most text 2. Large text (14pt w/bold or larger, 18pt not bold or larger) - 3:1

54 New CCA Pros Clearer & more intuitive Shows non-text contrast Supports all common formats Supports transparency Cons Less precise color picker Can t adjust lightness

55 Representing Colors RGB Red, green, blue (e.g., 118, 118, 118) Can be displayed as Hex (e.g., #767676) HSL Hue, saturation, lightness (e.g., 0, 0%, 46%) Lightness Luminance Alpha AKA transparency/opacity RGBA (118, 118, 118,.75) would have 2.9:1 contrast

56 Colour Contrast Analyser

57 1.4.1 Use of Color Level A

58 Conveying information Amanita Chanterelle Porcini Shiitake Tylopilus

59 Conveying information Amanita Chanterelle Porcini Shiitake Tylopilus Amanita Chanterelle Porcini Shiitake Tylopilus

60 Prompting a response

61 * *

62

63 1. Ensure sufficient contrast 2. Do not rely on color alone

64 Requirements for color-reliant links 1. A 3:1 contrast ratio between link text and non-link text 2. An additional visual cue (typically underline) on mouse hover AND keyboard focus

65

66

67

68

69

70 WebAIM Link Contrast Checker webaim.org/resources/linkcontrastchecker/

71 Jonathan Thank you!