Slide 1

Slide 1 text

Reevaluating Text Contrast Makoto Nakano LY Corporation

Slide 2

Slide 2 text

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)

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

What is the inability of people to see?

Slide 5

Slide 5 text

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.

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

WCAG 1.0 Blindness: Contrast and color differences

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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/

Slide 10

Slide 10 text

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/

Slide 11

Slide 11 text

WCAG 2.0 Blindness: Contrast Ratio

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

WCAG 3.0 Blindness: APCA

Slide 22

Slide 22 text

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/

Slide 23

Slide 23 text

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.

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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.

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

Challenges with LY Corporation brand colors

Slide 33

Slide 33 text

LY Corporation brand colors Red Green Navy

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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.

Slide 36

Slide 36 text

What to do next

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Figma's Contrast Check Feature

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Summary

Slide 41

Slide 41 text

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.

Slide 42

Slide 42 text

Thank You!