High contrast theme

Themes with light-coloured content on a dark background for easier reading and higher visibility

 

Date

Feb 2017 — Feb 2022

Tool

Galaxy Theme Service, Sketch, Adobe Creative Suite

Contribution

Over 90%

Role

Product design, UX∙UI, User testing

Team, Theme

UX design, Product management, Development, QA, Marketing

Team, Accessibility

UX design, UX Research, UX writing, Product management, Development, QA, Marketing

Relative link

One UI Accessibility

 
 

SUMMARY

As a designer of accessibility products, I conducted extensive research with low-vision users and identified challenges they face when using devices. Specifically, these individuals tend to use their devices in close proximity, making the traditional white background too bright for them. As a result, they frequently toggle color inversion on and off, which can be cumbersome and frustrating.

To address this issue, I developed a high-contrast theme that enables low-vision users to use their devices without constantly toggling color inversion. Through my interviews, I also discovered that eye conditions vary among low-vision users, prompting me to create a second theme with a different point color to ensure that more users were accommodated.

Upon launching these themes, they quickly became the top two globally-ranked themes on the store, with over three million downloads. I was thrilled to see that not only were low-vision users finding them helpful, but also that individuals without visual impairments were using and enjoying them. The success of these themes highlights how designs that are effective for users with limited vision can also be effortlessly accessible and aesthetically pleasing for a broader audience.

FINAL DESIGN

REVIEW

 

“To be honest i don't change theme much. I love High contrast themes. Light colored content on a dark background provides high readability, visibility and also soothing to eyes.”

@Vnainiwal17

“Since I don't like wacky and vibrant themes, so I use high contrast theme, which is subtle and according to my liking. The theme is simple, not too flashy, and I am able to enjoy core look of One UI.”

@karansingh005

 

“Theme which i like & use Most is HIGH CONTRAST MODE. The theme is very simple and if someone have eye problem they can use this theme. In high contrast theme one can easily feel some relaxation in eyes in comparison to other vibrant color theme.”

@imankur

“This is a super dark theme with darkmode on. I love the icons in this theme, uses a limited color palette with contrasting colors to make an interface easier to use. This is different than using an inverted display, though often times the high contrast mode looks similar to an inverted display because of the darker color scheme.”

@Simbalionet

 

Samsung Members Community

 

GLOBAL DOWNLOAD

 

Yellow high contrast

21,890,025

Blue high contrast

16,287,007

 

Total

38,177,032

 

Date: 2021.08.31.

AD, CONFERENCE

Case study

Target user, Problem, Background, Approach, Solution, Research, Challenge

TARGET USER

 

Low-vision people who have worse visual acuity and cannot read without optical aids

According to WHO, globally, at least 2.2 billion people have a near or distance vision impairment. In at least 1 billion – or almost half – of these cases, vision impairment could have been prevented or has yet to be addressed.

 

PROBLEM

Low-vision people use devices close to their eyes so that the white background is too bright.

The color contrast between the background, text, and controller isn’t high enough.

BACKGROUND

Low-vision users must keep turning the Color inversion feature off and on as they use the device.

They turn on color inversion to use the device and turn it off briefly to see pictures or videos and then turn it back on.

Eye conditions vary among low-vision users.

One user may have a clear view with yellow text on a black background and another may have a clear view with white text on a blue background.

 SOLUTION

Galaxy Themes

Providing high-contrast themes with light-coloured content on a dark background using the Galaxy themes service that allows customization of UI components

Providing additional high-contrast options that can be using with themes

 APPROACH

Targeting extremely severe low-vision user

The UI which is easy for individual users with extremely limited vision is effortless for everyone else. I recruited two low-vision people with worse visual acuity who cannot read without optical aids for interviews and testing.

Process that updates after user test

Calls and messages are features that UX designers use, but we usually neither use nor need accessibility features. I tested this on low-vision users using device prototypes and launched/updated themes that confirmed the highest visibility.

Using existing theme service

By using the theme service, the UI can be changed into high-contrast without rebuilding the whole UI or adding additional code. The theme is easy to set up and familiar to users. Also, It’s not giving a task to build a high-contrast theme to all designers, but one designer can easily make a prototype with the existing theme authoring tool.

 RESEARCH

High contrast options on PC

I researched the high contrast mode of MS windows and the high contrast extension of Google Chrome.

Optical aids

You can use the magnifier to view the text of a book or newspaper in diverse color themes. I found themes with yellow text on a black background and white text on a blue background. I visited Gangwon Myeongjin School, a special school for the visually impaired, and observed the use of optical aids by teachers and students with visual impairments. I observed various eye conditions such as cataracts, glaucoma, and presbyopia through assistive devices.

 CHALLENGE

 

Eye conditions

Each low-vision person had similarities and differences in the environment they could see well. There were cases depending on the device's resolution, font size setting, and whether to use accessibility features. One theme could not meet the needs of all low-vision users, so we had to create two themes according to typical eye conditions.

After the release of the yellow point color high contrast theme (2017), I tested various point colors and additionally released a sky blue point color high contrast theme (2018).

 
 
 

Optimizing theme service

I worked on high-contrast theme projects with several products, improving policies and solving technical problems together.

The theme was not applied in some UIs and apps including the navigation bar and search bar. When low-vision users held the device close to their eyes and viewed the unthemed UI, they suddenly became dazzled or unable to read. We continued to expand the scope of applying the theme.

Since applying the theme to the web view was impossible, I worked with the Samsung Internet team to add a high-contrast mode setting in the app. We designed a web experience with the colors preferred by low-vision people.

 
 
 

Dark mode generality

I conducted a test of whether high-contrast themes can be replaced with dark mode. Although dark mode covers more apps than the themes, the concept of the dark mode is to reduce brightness which is not fit for the accessibility concept.

Since One UI 3, some apps including Samsung E-mail and Samsung notes started to support dark mode, so making it possible for low-vision users who prefer the dark background to use most screens in dark mode as well as high-contrast themes.

 
 
 

Easy access experience

After the release of the high-contrast themes, low-vision people did not know about them or how to find them. I’ve constantly added and improved methods to make them easier to set up.

  • SE 9: Registered 2 high-contrast themes in the theme store

  • One UI: Added a high-contrast theme to the My stuff page in the theme store

  • One UI 2: Added high-contrast theme page in accessibility settings

  • One UI 3: Added preview thumbnails to the high-contrast theme page

 
 
Next
Next

One UI Accessibility