Wiki Spaces

Documentation
Projects
Resources

Get Help from Others

Q&A: Ask OpenMRS
Discussion: OpenMRS Talk
Real-Time: IRC Chat | Slack

Projects

Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

The low color contrast ratio makes them undesirable to use for primary action buttons as most fail both AA and AAA Accessibility Guidelines.


WCAG Guidelines

"WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger."


...

OpenMRS Brand Colors - Contrast Study


Summary

OpenMRS ColorColor-contrast acceptability based on white/light grey
Orange #F26522Epic fail
Teal #009384Fail
Violet: #5B57A6Pass
Gold: #EEA616Epic fail


OpenMRS Orange: #F26522



OpenMRS Teal #009384


OpenMRS Violet: #5B57A6


OpenMRS Gold: #EEA616



...

Colors elsewhere on the internet - Color Study 


Google search results blue Dec 2019:  #1a0dab

...

https://goodui.org/leaks/google-has-been-a-b-testing-link-colors-again-and-this-light-blue-didnt-pass/



Traditional web action blue #33aaff



...

Real Life Examples

Website footer with very faint grey background (#f5f5f7)


OpenMRS Brand Colors


Google links colors (in dark and lighter shade)


Apple links colors



...

Experimenting with better options


Shift Orange to: #CC2A00

Shifting orange darker and closer to red increase the contrast, while being able to still have higher contrast with dark colors making primary action links stand out better.

...