By now designers have probably heard or used online tools and applications focusing on colour contrast and accessibility. WCAG (Web Content Accessibility Guidelines) covers a wide range of recommendations for making web content more accessible. WCAG focuses on a wide range of disabilities, including low vision, hearing loss, speech disabilities and combinations of these. There’s already been a lot of good applications available to help designers design better and accessible UI. However, I wanted to combine all the possible features that help designers build accessible UI in one application.
I wanted to build an application where a designer can see the UI from the perspective of a colour blind individual. The idea was to let designers visualise colours as they are perceived by various types of colour blindness. Colour contrast is also a vital tool to designers, so I made sure that a colour contrast analyser is included as well. Users will be able to make sure that colour combinations have enough contrast between them to meet the minimum level of at least 4.5:1 for normal text and 3:1 for large text.
Colour blindness and colour contrast tools are essential when one is designing an accessible UI. Giving that these tools are very common, I wanted to have more advanced tools that help users understand the problems faced by people with extreme vision problems. These might include, low acuity, visual glare, ghosting, floaters and obstructions to different sides of the retinal detachment.
Another tool I wanted to include is 'Color Compare’, were users can compare two colours and change the colour deficiency to see the difference between the two colours. With this feature, users can also exact a colour from anywhere on the screen using the colour picker tool. Colour libraries where also included to keep all the colour schemes saved and organised with different name tags. Users can also share and export colours to different code formats.
Here is a write up on the features offered in this app concept and a peek under the hood how the app works. Let’s break down the project into the four different features.
2. Text Contrast Analyser
3. Colour Contrast Analyser
4. Color Libraries
Before I started working on the actual app, I gathered a lot of different UIs and compiled them into a mood board. This helped me to better visualise the look and feel of the app. Once that was complete I started sketching out the UI and usability of the features.
Application format and layout
I wanted to keep the app layout very simple and easy to use. For the user interface of the app, I adopted an 8 point grid system. Since the variety of screen sizes nowadays is vast, and most screen sizes are divisible by 8, it makes it easier to space out elements and scale for different devices and resolutions.
For the user to better visualise the problems faced by people with slight to extreme vision problems, I added sliders to control the intensity of pervasive issue. Blur, Contrast Loss, Glare and Cloudiness are found in the Pervasive issues dropdown. Other vision problems such as Regular Degeneration, Glaucoma, Retinal Detachment and Diabetic Retinopathy can be found in the Blocked Visual Field dropdown. Alongside these features, users can also change the Colour Deficiency or type of colour blindness.
Blocked Visual Field
Each blocked visual field is described in more detail below. Images used below are the same illustrations used in the app window to give a visual representation of how the individual perceives the image.
Thumbnail used to illustrate that 'Normal Vision' is selected.
Central (macular degeneration)
Macular degeneration, also known as age-related macular degeneration (AMD or ARMD), is a medical condition which may result in blurred or no vision in the centre of the visual field.
Peripheral (Glaucoma, Retinis Pigmentosa)
People with glaucoma will slowly lose their peripheral (side) vision. People may miss objects to the side and out of the corner of their eye. They seem to be looking through a tunnel. Over time, straight-ahead (central) vision may decrease until no vision remains.
Corner (Retinal Detachment)
Symptoms include an increase in the number of floaters, flashes of light, and worsening of the outer part of the visual field.
Large Spots (Diabetic Retinopathy)
Diabetic retinopathy symptoms may include, spots or dark strings floating in your vision (floaters), blurred vision and dark or empty areas in your vision
Hemianopsia, or hemianopia, is a visual field loss on the left or right side of the vertical midline. It can affect one eye but usually affects both eyes.
In the ‘Simulator’ tab, one can change the window size of the pervasive issue by clicking the ‘Window Size’ tab. The mask of the effect can also be changed by clicking the ‘Mask Preview’ tab.
Image showing how users can make use of the preview buttons to change the window size. Users can also change whether the preview is masked or shown in full without any cropping in the seperate Simulator window.
Each pervasive issue is described in more detail below. Images used below are the same effects that will be applied when the user changes the intensity of the pervasive issue.
This image was used as a background image for all the pervasive issues to show how the vision is affected.
Blur (Low Acuity)
Visual acuity is dependent on optical and neural factors, i.e., the sharpness of the retinal focus within the eye, the health and functioning of the retina, and the sensitivity of the interpretative faculty of the brain. In other words, a low acuity is a blurred vision while a high acuity is a sharp vision.
As quoted by Sherry Van Liere, contrast sensitivity is the visual ability to distinguish an object from its background; it is not the same as visual acuity. The objects within our visual field are of varying size, colour and brightness; some things are close, some are far; some things consist of a myriad of details while other things are almost monotone. When all of these images enter the pupil in the form of light waves, the cells in our retina must begin to make sense of them, and the images sent to the brain are interpreted as the world in front of us. The image created on our retina is much like the image on a computer screen. The overall brightness, or luminance, is determined by the amount of light available. Changing the brightness makes everything either lighter or darker.
Glare is difficulty of seeing in the presence of bright light such as direct or reflected sunlight or artificial light such as car headlamps at night. Disability glare describes the loss of retinal image contrast as a result of intra-ocular light scatter, or stray-light. It has increasingly important modern implications such as with cataract and refractive surgery or high-intensity lighting.
Cataract is the clouding of the eye's natural lens. It is the most common cause of vision loss in people over age 40 and is also the principal cause of blindness in the world
Users can also choose to upload and render images by clicking the main call to action button at the bottom of the app window ‘Upload and Render Image’. This action uploads an image in a separate window while having the same options to adjust the blocked visual field and pervasive issues.
2. Text Contrast Analyser
Text Contrast Analyser checks the contrast between different text and background colour combinations against WCAG standards. This feature works by clicking the two colour buttons and change the colour from the colour selector window. The results will show WCAG contrast ratios for all types of colour blindness.
3. Colour Contrast Analyser
This feature is dedicated to colours that might be used on shapes or backgrounds. A separate window is opened automatically to show the contrast between the colours selected in a real life case scenario. Before talking about the pop up window, let's go over the features found in the main window.
The first action found in the window is an option to choose colours from libraries. Once all the desired colours are chosen, users have the option to ‘Add Colors to New Library’. Colours can be chosen from the colour picker tool which can be accessed by clicking the ‘+’ button. The saved library can be used anytime in the Colour Contrast Analyser Window.
The option to easily switch and save colours from Normal Vision to any kind of colour blindness, helps the designer to design better and accessible user interfaces. The naming of the colours can be changed to either the original colour, or to the colour perceived by the visual impaired individual. This option can be toggled from the accessibility icon found on the right hand side of the ‘Name your Library’ field.
Selecting colours from images
I found tools online where colours can be selected from an image. If one likes a colour scheme of a particular image, the image can be upload or dragged in the ‘Get colours from image’ section. Colours will be selected automatically and the same process of saving the colours to a new library can be applied.
By clicking on a colour, the window gives a preview of the colour format selected. The colour format can be changed from the icon found at the bottom right of the window. Colours can be exported to Android, CGColor, CSS, Java, UIColor/NSColor Swift Extension, UIColor/NSColor and Objective-C Category.
As briefly mentioned, the purpose of a separate window is to show the contrast between the colours selected in a real life case scenario. By default, the window presents the user in a UI scenario were all colours are used in a chart.
Accessibility features can be toggled from the dropdown on the right hand side of the window. By default, it is set to ‘Default’. Other options include, Reduced Whitness, High Contrast, Darken Colors, Inverted Colors, Night Shift and Color Tint. Patterns can also be added to the UI when there is not enough contrast between colours.
Other chart types can be selected from the tabs found on top. In total 3 different charts can be toggled. These include, the default chart presented on opening of the window; the bar chart, and other two options, the bubble chart and pie chart.
4. Color Libraries
Acesscolor give users the option to organise colour palettes, create libraries, and keep all colour schemes well organised with with different names. The whole palette can be exported to a variety of colour formats. These include Android, CGColor, CSS, Java, UIColor/NSColor Swift Extension, UIColor/NSColor and Objective-C Category.
This project was designed using Sketch. By making use of symbols for all the components, the process was much quicker. Since I designed separate components and created the layers as symbols, it made it very easy to construct the layout of each tab.
This was a concept I always wanted to work on. I would love to collaborate with a developer to make this application available to the public. The aim of this app was to improve and enhance the process of the designers while designing accessible user interfaces. After all, when making a product or a UI accessible, everyone wins! 😄