Reevaluating Text Contrast Makoto Nakano LY Corporation 

self-introduction • Makoto Nakano • I am involved in improving the accessibility of the product and formulating and implementing UI guidelines • LY Corporation Web Accessibility Team • Yahoo! JAPAN UI Guidelines Team • Web Accessibility Infrastructure Committee, Working Group 1 Chairperson • Digital Agency, Accessibility Specialist (part-time) 

Agenda • What is the inability of people to see? • WCAG 1.0 Blindness: Contrast and Color Differences • WCAG 2.0 Blindness: Contrast Ratio • WCAG 3.0 Obfuscity: APCA • Challenges with LINE Yahoo Japan's brand colors • Summary WCAG: Web Content Accessibility Guidelines. W3C recommended web accessibility guidelines 

What is the inability of people to see? 

Why is contrast important? • People with low vision are affected by contrast sensitivity • Some people cite computers and the Internet as the number one reason why it is difficult to use • Contrast sensitivity decreases with age • After the 50s, it becomes especially difficult to see the color of the blue system. • In bright places such as outdoors, the contrast may be temporarily lower. 

Simulating Contrast Desensitization by AR Eye simulation https://www.jnj.co.jp/media-center/press-releases/20241010 

WCAG 1.0 Blindness: Contrast and color differences 

What is WCAG? • WCAG : Web Content Accessibility Guidelines • Guidelines for ensuring the accessibility of web content • Developed and recommended by the W3C • WCAG 1.0 was recommended in 1999 and has been updated from time to time • The latest version is WCAG 2.2, which was recommended for 2023 • WCAG 3.0 is currently being considered 

Evaluation of visual debilitation in WCAG 1.0 Checkpoint 2.2 Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen. • WCAG 2.0 had a single color and contrast criteria. • There were no specific standards https://www.w3.org/TR/WCAG10/ 

Reviewed by AERT • Techniques For Accessibility Evaluation And Repair Tools (AERT) • It was discussed in the technical documentation for developers of accessibility checking tools • The following criteria were established as a draft • Brightness Difference: More than 125 • Color difference: more than 500 https://www.w3.org/TR/AERT/ 

WCAG 2.0 Blindness: Contrast Ratio 

What is WCAG 2.0? WCAG 2.0 = ISO/IEC 40500: 2012 = JIS X 8341-3: 2016 

How to calculate the contrast ratio Contrast Ratio 𝐵𝐵𝐵𝐵𝐵𝐵𝐵𝐵ℎ𝑡𝑡𝑡𝑡𝑡𝑡 𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟 𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙 + 0.05 𝐷𝐷𝐷𝐷𝐷𝐷𝐷𝐷𝐷𝐷𝐷𝐷 𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟 𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙 + 0.05 Relative Luminance 𝑅𝑅 ∗ 0.2126 + 𝐺𝐺 ∗ 0.7152 + 𝐵𝐵 ∗ 0.0722 

How to calculate relative luminance The values of R, G, and B (find R here) 𝑅𝑅𝑟𝑟𝑟𝑟𝑟𝑟 = 0~255 255 R <= 0.4045 𝑅𝑅 = 𝑅𝑅𝑟𝑟𝑟𝑟𝑟𝑟 12.92 R > 0.4045 𝑅𝑅 = 𝑅𝑅 + 0.055 1.055 2.4 

Contrast Ratio Criteria The contrast ratio derived from the relative luminance is evaluated according to the font size and bold text 18px 24px normal 4.5:1 3:1 bold 3:1 3:1 

Rationale for contrast ratio • 3:1 • ISO 9241-3:1992 (Ergonomic requirements for office work with visual display terminals (VDTs)) • 4.5:1 • Empirical fact that people with 0.5 visual acuity have 1.5 times lower contrast sensitivity ISO 9241-3, Ergonomic requirements for office work with visual display terminals (VDTs) - Part 3: Visual display requirements. Amendment 1. 

There is a discrepancy between the visual impression and the contrast ratio. • Since it is a standard based only on luminance that does not take into account color differences such as hue and saturation, depending on the color combination, it may appear that the visibility and contrast ratio do not match. • The orange color is more likely to cause that problem Confirm NG 3.3:1 Confirm OK 6.3:1 

Dark colors are appreciated by each other • Combinations of dark colors such as dark mode are easily appreciated. • The perception of contrast relative to the surrounding environment is not taken into account. Confirm OK 4.55:1 Confirm OK 4.55:1 

Using an old standard for color space • Limited to sRGB space • ISO 9241-3:1992 calculates relative luminance in the sRGB color space • The sRGB space is a color space that assumes the output to a cathode ray tube display • It does not include colors in other color spaces that can be represented by liquid crystal displays. Edited from https://commons.wikimedia.org/wiki/File:CIE1931xy_gamut_comparison_of_sRGB_P3_Rec2020.svg 

Other contrast ratio issues • Other issues • Unclear value of "4.5:1" • Unclear standards for non-alphabetic characters such as Japanese, Chinese, and Korean 

WCAG 3.0 Blindness: APCA 

What is APCA? • Advanced Perceptual Contrast Algorithm • Andrew Somers (Myndex) invents a method of calculating contrast • Considers more factors, such as font size, thickness (line width), etc. • Incorporates knowledge from visual science https://git.apcacontrast.com/ 

Luminosity Contrast (LC) • Generate perceptual lightness contrast from sRGB colors for text and background • The brightness contrast can be from 0 to 100 • Standards are set by Lc value and the size and thickness of the text. 

Luminosity Contrast (LC) algorithm https://readtech.org/ARC/tests/visual-readability-contrast/?tn=resources 

Principle of Luminosity Contrast (LC) • Aiming to solve the problem of overestimating contrast with dark colors • Aiming for perceptual uniformity • The evaluation changes depending on whether the background or the text is light (dark). • Some things are the same as WCAG 2.0 • Focuses on the difference between light and dark colors • Evaluated in the sRGB space 

Recommended values for Lc applications • Lc90~ Equivalent to 7:1 of WCAG 2.0 • Lc75~ Equivalent to 4.5:1 of WCAG 2.0 • Lc60~ Equivalent to 3:1 of WCAG 2.0 • Lc45~ Headings and other large, bold text and pictograms with fine details • Lc30~ Placeholders, etc., text that is not the main content • Lc15~ Non-text elements that need to be identified 

APCA Lookup Table • Table for associating font sizes and weights with Lc • Depending on the font size and weight, you can check whether the Lc meets the standard value. • It takes into account that the thickness of the line (≈ font size and weight) has a great influence on the perception of contrast by people 

Actual APCA Lookup Table Font Size 100 AVOID 200 300 Refe 400 NORMAL rence Font 500 Weight 600 700 BOLD 800 900 pt px APCA Contrast Value (Lc) 7.5 10 ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ ⊘ 9 12 ⊘ ⊘ ⊘ ®© ®© ®© ®© ⊘ ⊘ 10.5 14 ⊘ ⊘ ®© 100 100 90 75 ⊘ ⊘ 11.3 15 ⊘ ⊘ ®© 100 90 75 70 ⊘ ⊘ 12 16 ⊘ ⊘ ®© 90 75 70 60 60 ⊘ 13.5 18 ⊘ ®© 100 75 70 60 55 55 55 15.8 21 ⊘ ®© 90 70 60 55 50 50 50 18 24 ⊘ ®© 75 60 55 50 45 45 45 21 28 ⊘ 100 70 55 50 45 43 43 43 24 32 ⊘ 90 65 50 45 43 40 40 40 27 36 ⊘ 75 60 45 43 40 38 38 38 36 48 90 60 55 43 40 38 35 35 35 45 60 75 55 50 40 38 35 33 33 33 54 72 60 50 45 38 35 33 30 30 30 72 96 50 45 40 35 33 30 25 25 25 https://git.apcacontrast.com/documentation/APCAeasyIntro 

Sample using ACPA (1/2) Even with the same color combination, the evaluation changes depending on the text color and background color. Confirm CR* 3.3:1 Lc -62.3 Confirm CR 3.3:1 Lc 57.0 Depending on the color combination, the rating will be reversed Confirm CR 3.3:1 Lc -62.3 ＜ ＞ Confirm CR 4.5:1 Lc -42.4 * CR = Contrast Ratio 

Sample using ACPA (2/2) The combination of dark colors makes it difficult to deviate from the appearance and evaluation. Confirm CR 3.3:1 Lc -62.3 Confirm CR 6.8:1 Lc 47.1 • The orange background with white/black text in APCA fails to meet the standards. • Transitioning from contrast ratio to APCA does not simplify the evaluation. 

APCA Challenges • Complexity • Since the evaluation is based on the size and thickness of the letters, the work becomes complicated. • There is also a standard called "Bronze Simple Mode" that is easy to migrate from WCAG 2.x • Reliability of standards • Although the evaluation is based on research results, it is not as fair and reliable as ISO, so it is necessary to accumulate evidence. 

Challenges with LY Corporation brand colors 

LY Corporation brand colors Red Green Navy 

Verification results of LY Corporation brand colors When used as a background color, it often does not meet the standard. Contrast difference, Color difference 125~ / 500~ Contrast Ratio 4.5:1~ APCA Lc 75~ (18px) Red + White NG 173 / 459 NG 4:1 NG 69.43 Red + Black NG 82 / 306 OK 5.3:1 NG 40.14 Green + White NG 127 / 475 NG 2.3:1 NG 48.5 Green + Black NG 128 / 290 OK 9.3:1 NG 60.25 Navy + White OK 247 / 693 OK 19.2:1 OK 100.76 Navy + Black NG 82 / 306 NG 1.1:1 NG 40.14 

How to use brand colors • It is basically difficult to use it for the text color or the background color of the text • It can be used in large letters. • It is better to use it for places other than the text color and character background. 

What to do next 

In order to design the text so that it is easy to see • Adhere to WCAG contrast ratio • Catch up on WCAG 3.0 and APCA development trends • Use the check tool to make sure that you can grasp the contrast of the text on a regular basis • Once you can adjust the contrast, consider the color vision characteristics as well 

Figma's Contrast Check Feature 

WebAIM Contrast Checker https://webaim.org/resources/contrastchecker/ 

Summary 

Session Summary • Regarding contrast, how to check each version of WCAG was explained • Contrast and color differences, contrast ratios, APCA • Contrast is an element that underpins the WCAG principle of "perceivable” • It is important to make the text easy to read in order to get users in various states and situations to use the product. 

Thank You!