Close
Type at least 1 character to search
Back to top

Color Accessibility

Accessibility of any digital product should make it suitable for elderly users, visually impaired, color blind, or others. The general idea is that a digital product should be easy to “see” for everyone. Contrast levels help people with vision problems to be able to use the product as intended. Check the WCAG 2.0 contrast for all essential Ul elements. The minimum level of accessibility is 4:5:1 contrast ration (or AA)
for all of the most crucial elements.

  • A – Low contrast
  • AA – Average contrast
  • AAA – High contrast

Accessible isn’t Ugly

Achieving the necessary contrast ratio when using white text over a colored background can be very difficult. This also creates hierarchical issues as those elements grab the user’s attention more than what is intended. Solving this is quite simple – you flip the contrast. Use a darker text on top of a lighter color background.

Improve contrast with shadows

If struggling with contrast even with a border around elements, include a subtle drop shadow around that element will make them stand out more.

Flat Design has Depth

When we talk about flat design, we refer to designs with no shadows, gradients, or other effects that mimic how light interacts with real-life objects. While it’s more challenging to create depth without any shadows or gradients, it’s not impossible. We have to think about it differently since colors and shapes are all we have at our disposal. When we think about light, the lighter parts are usually closer to us than the dark parts. This means that we can create depth only by using a shade of a specific color. Color, therefore, is the best tool for you to convey distance. The lighter elements will feel like they are raised from the page.

Overlap Elements

The single most effective way of creating depth is by having overlapping elements.
This will trick your eye that the design has multiple layers, and you might even get away without using a shadow.