Keeping Colors from Killing Your Product
•
0 likes•491 views
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.
Recommended
Recommended
More Related Content
Similar to Keeping Colors from Killing Your Product
Similar to Keeping Colors from Killing Your Product (20)
More from Christopher Schmitt
More from Christopher Schmitt (20)
Recently uploaded
Recently uploaded (20)
Keeping Colors from Killing Your Product
- 1. K E E P I N G ColorsFROM KILLING YOUR PRODUCT CHRISTOPHER SCHMITT https://knowbility.org https://twitter.com/@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
- 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.
- 21. Hue
- 22. Value
- 23. Contrast
- 24. Brightness
- 25. Saturation
- 30. Additive 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
- 37. Gradated Scheme
- 46. 1 in 12 Low Vision or Color Blindness
- 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
- 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?
- 73. How do I avoid failing contrast from the start?
- 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