🪴 Quartz 4.0

Recent Notes

See 77 more →

Color Contrast

235 words, 2 min read
Last updated on Oct 31, 2024

Notes

  • There should be adequate contrast between color of the piece of the information in the foreground and color of it’s background.
  • Good design needs sufficient contrast between foreground and background colors - not just in text but images, links , icons & buttons.
  • Color Contrast.jpg

Color Contrast Vitals

  • Color Contrast.png
  • disabled elements should have some contrast making the elements visible to the user
  • try to the maximum for accessibility and usability

Experience it : Red - Green / Blue - Yellow / No Color

  • Types of color blindness :
    • Red - Green
    • Blue - Yellow
    • Complete color blindness
  • Red - Green very common
  • Color Contrast.pdf
  • Top color combos to avoid :
    • Red and green
    • green and brown
    • green and blue
    • blue and gray
    • blue and purple
    • green and gray
    • green and black
  1. Design
  2. Design for Accessibility

References

  1. Web Accessibility Perspectives: Colors with Good Contrast - YouTube
  2. Colors with Good Contrast | Web Accessibility Initiative (WAI) | W3C
  3. 10 Awesome World Government Design Systems and UI Kits | Codinhood
  4. Accessibility – Digital.gov
  5. Web Content Accessibility Guidelines (WCAG) 2.2
  6. Color and contrast accessibility  |  Articles  |  web.dev
  7. It ain’t easy seeing green | Perspectives | Sightsavers
  8. Chrome Web Store - Extensions
  9. Grayscale the Web - Save Sites
  10. Funkify – Disability Simulator
  11. Web Disability Simulator
  12. Silktide - website accessibility simulator
  13. Accessible color palette builder
  14. WebAIM: Contrast Checker
  15. Chrome Web Store - Extensions
  16. Understanding Success Criterion 1.4.11: Non-text Contrast | WAI | W3C

Graph View

Backlinks