This document discusses best practices for using color in web design to ensure accessibility and avoid accessibility issues related to color contrast. It provides an overview of color theory terms, different color schemes, and examples of how top companies use color on their websites. It also reviews guidelines for sufficient color contrast from the WCAG and tools for checking color contrast. The key recommendations are to use color thoughtfully following principles of contrast and accessibility, apply sufficient contrast ratios to all elements, and proactively test color accessibility.

1. K E E P I N G
ColorsFROM KILLING YOUR PRODUCT
CHRISTOPHER SCHMITT https://knowbility.org https://twitter.com/@teleject

2. I am
Christopher Schmitt.
@teleject

3. • What are the design treatments of the top companies’
online presences?
• Breaking down color.
• Looking at creating color schemes.
• Issues with color and accessibility.
• How to check for color accessibility issues.
• How to prevent color accessibility issues.
• Perform quick site audits, if time allows.

4. Before that —
Anyone want to showcase
their business’ site?

5. How are companies
using design (including
color)?

6. Looked at the top
100 of Fortune 500
sites
https://www.dropbox.com/s/51dgp097danfq9o/Fortune%20500.zip?dl=0

7. Average main
heading size (px)
47.1
http://shorturl.at/bcvxG

8. Sites used sans-serif
as main font style
91
http://shorturl.at/bcvxG

9. Sites used an
image carousel
34
http://shorturl.at/bcvxG

10. http://shorturl.at/bcvxG
Main Color Choice
3%
32%
8%
8%
50%
April Green Yellow Red Purple

11. Company site
examples

12. https://abc.xyz/investor/

13. https://abc.xyz/investor/

14. https://merck.com

15. https://merck.com

16. https://www.sysco.com/

17. https://www.sysco.com/ - color contrast check

18. https://www.sysco.com/ - images disabled, text selected

19. Better use of colors
means a better product.

20. Color Theory Terms

21. Hue

22. Value

23. Contrast

24. Brightness

25. Saturation

26. Hue
Value
Contrast
Brightness
Saturation

27. https://design.lyft.com/re-approaching-color-9e604ba22c88

28. https://en.wikipedia.org/wiki/HSL_and_HSV

29. Primary Color
Systems

30. Additive Primary

31. Subtractive Primary

32. Different CYMK Blacks
https://www.printi.com/blog/guide-to-cmyk-black/
CYAN MAGENTA YELLOW BLACK
Flat Black 0% 0% 0% 100%
Rich Black 50% 50% 30% 100%
Registration
Black
100% 100% 100% 100%
Cool Black 50% 0% 0% 100%

33. Color Schemes

34. Color Wheel

35. Analogous Scheme

36. Monochromatic Scheme

37. Gradated Scheme

38. Complimentary Scheme

39. Problems with Colors

40. Color is relative

41. http://colorisrelative.com/color/

42. http://samesameordifferent.com/

43. Barton Creek Greenbelt

44. https://www.dailyartmagazine.com/meet-mona-lisa-twin/

45. Color Accessibility

46. 1 in 12
Low Vision or
Color Blindness

47. https://corporate.exxonmobil.com

48. http://colorfuzz.com/

49. http://colorfuzz.com/

50. http://colorfuzz.com/

51. http://colorfuzz.com/

52. http://colorfuzz.com/

53. http://colorfuzz.com/

54. https://corporate.exxonmobil.com

55. Web Content Accessibility
Guidelines (WCAG)
re: Color & Contrast

56. Hard to pick a path,
remediation for different
color blindness…
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

57. …rely instead on
luminance contrast.
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

58. From Hex to HSL

59. https://design.lyft.com/re-approaching-color-9e604ba22c88

60. https://en.wikipedia.org/wiki/HSL_and_HSV

61. #ff0000
rgb(255, 0, 0)
hsl(0, 100%, 50%)

62. Comparing colors for
accessibility we look at
color contrast ratio.
https://medium.muz.li/the-science-of-color-contrast-an-expert-designers-
guide-33e84c41d156

63. (L1 + 0.05)
divided by
(L2 + 0.05)

64. Color contrast ratio
denoted as
3.4:1, 4:1, 2.1:1, etc.

65. Minimal recommended contrast ratio
4.5:1 for regular copy
or
3:1 for larger fonts (18pt or 14pt bold)

66. How do I check for
color contrast?

67. Google Chrome
DevTools

68. https://abc.xyz/investor/

69. https://abc.xyz/investor/

70. https://developer.paciellogroup.com/resources/contrastanalyser/

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

72. https://contrast-ratio.com/

73. How do I avoid failing
contrast from the start?

74. https://css-tricks.com/css-variables-calc-rgb-enforcing-high-contrast-colors/

75. https://css-tricks.com/css-variables-calc-rgb-enforcing-high-contrast-colors/

76. https://tenon.io/get-code

77. https://www.deque.com/axe/axe-for-web/

78. https://design.lyft.com/re-approaching-color-9e604ba22c88

82. Color is great.

83. Apply contrast to all design and
content elements — from hover
links, form inputs borders, focus
rings, and more!

84. Be proactive in making
products accessible, so
that they may be usable.

85. Thank you!
CHRISTOPHER SCHMITT https://knowbility.org https://twitter.com/@teleject