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
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