Upgrade to Pro — share decks privately, control downloads, hide ads and more …

文字コントラストを改めて考える / Reevaluating Text Contrast

文字コントラストを改めて考える / Reevaluating Text Contrast

文字の読みやすさを左右する「コントラスト」について、過去から現在までの基準がどのように変わってきたかと、UIデザインで気をつけるポイントについて解説します。

More Decks by LINEヤフーTech (LY Corporation Tech)

Other Decks in Design

Transcript

  1. 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)
  2. 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
  3. 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.
  4. 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
  5. 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/
  6. 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/
  7. How to calculate the contrast ratio Contrast Ratio 𝐵𝐵𝐵𝐵𝐵𝐵𝐵𝐵ℎ𝑡𝑡𝑡𝑡𝑡𝑡 𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟

    𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙 + 0.05 𝐷𝐷𝐷𝐷𝐷𝐷𝐷𝐷𝐷𝐷𝐷𝐷 𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟 𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙𝑙 + 0.05 Relative Luminance 𝑅𝑅 ∗ 0.2126 + 𝐺𝐺 ∗ 0.7152 + 𝐵𝐵 ∗ 0.0722
  8. 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
  9. 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
  10. 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.
  11. 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
  12. 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
  13. 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
  14. Other contrast ratio issues • Other issues • Unclear value

    of "4.5:1" • Unclear standards for non-alphabetic characters such as Japanese, Chinese, and Korean
  15. 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/
  16. 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.
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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.
  23. 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.
  24. 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
  25. 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.
  26. 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
  27. 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.