Flat Design and Accessibility

The internet has changed a lot over the last few years, and so has the way we view things online. As such, in this article, we will be taking a look at some of the recent accessibility improvements that Flat Design has brought and helping make the internet that little bit more open and accessible to everyone.

Flat Elements

Skeuomorphs are used to emulate colors, textures, shapes and even features of actual objects in real life, and thus can be really helpful for those who are not used to new technologies and prefer simulations of their environment. However, how accurate will it be for people with visual disabilities? Will it really be worth the effort to keep designing this way for them? Well, the counterpart of this option, flat design, has a lot of advantages that can help those with special needs. As flat elements make use of basic shapes such as regular/irregular polygons, they are more recognizable.

At the left, flat design showing squared/rectangular elements and a high contrast in all buttons. The skeuomorphic calculator on the right, showing low contrast and a lot of bevel and shadow effects. [The common denominator here is the use of big and clear typography (more likely Sans-Serifs) in high contrast colors to improve readability.

Moreover, clear and big typography can be used inside basic elements to create web and UI buttons with strong contrast in order to help users easily identify the functionality of a given element and differentiate it from the others. Speaking of elements, such flat elements have become really important in the design process as they help in giving personality and strength to the flat design stream, thereby contributing towards a better appearance, visibility and clearness of all the buttons and interface elements.

Basic shapes, solid colors and simple icons make part of this nice theme for iPhone which shows the best of flat UI elements.

Solid and High Contrast Color

So far, we have talked about high contrast colors when applying typography and icons to basic elements. Now, let us get into detailed aspects of the same. The usage of high contrast colors in web design is not a new concept. In fact, for many years, high contrast colors have been used to lend a better visibility to certain key elements of web design.

The internet has many amazing tutorials and tools to help you create accurate combinations of colors. For example, Color Scheme Designer shows you palettes of single, complementary, triads, tetrads and analogic colors, and helps you get a better idea about how certain colors interact with some others.

Color Scheme Designer, a great tool to see color behavior when combined, and use the results as a reference when creating flat designs with contrasting colors.

Also, contrast may be applied to some other aspects different than color itself, such as shapes, distributions, font weights, heights, strokes and textures. In fact, playing with all these elements and their corresponding contrast can improve the appearance of your design and also help you make the design more accessible for people with reduced vision.

examples of Contrasting Websites with Desaturation

Here are some examples of contrasting websites with desaturation and, in some cases, negative inverted, showing how beautiful design is naturally compatible with usability and accessibility concepts.

bigtop.it. With big typography and elements, soft contrasts between warm and mild cold colors. Nice to the sight and effective at elements definition by their contrast.

aaugh.it takes advantage of simplicity given by minimalism and creates a moderately strong contrast.

cheesesurvivalkit.com has a beautiful triad of gray, white and red, which provides a strong contrast that improves readability and elements definition.

metaphiziks.com working perfectly to improve content display.

Symb.ly is a high contrast site with a minimal style that lets you focus on content.

Odopod.com shows a beautiful mild contrast using pink, white and photographs in high format. When looking at the grayscale version, every element is fully identifiable.

unfold.no a site with elegant and simple design and clear content.

You might also like…

The Flat Design Aesthetic: A Discussion →
Examples of ‘Flat’ in Web Design →

Speckyboy Design Magazine

Leave a Comment