[a11y] 11.1.4.3 Contrast (minimum)

[tschiebel]

audit: https://infinite.owncloud.com/s/QtwuiGHikwFjozV

https://www.etsi.org/deliver/etsi_en/301500_301599/301549/03.02.01_60/en_301549v030201p.pdf https://github.com/BIK-BITV/BIK-App-Test/tree/main/Pr%C3%BCfschritte/de

Note 1: For texts (also in the focused state) under 18 points (or bold text below 14 points), the contrast ratio between foreground and background color should be at least 4.5:1. For large fonts, the contrast ratio should be 3:1 or greater. Note 2: Since the contrast measurements in the test were carried out using screenshots the test results may differ from the actual color values. It is possible that the colors are displayed differently on the screenshot than on the screen of the device. For this reason, the test results should be regarded as guide values.

Personal Space

• The labelling of the "Browse folder" input field does not meet the contrast requirements for texts, as the contrast ratio is only approx. 2.9:1. [MOVED TO owncloud/android/issues/4365]

• [x] Both the size information and the time information on the page do not fulfill the contrast requirements for texts, as the contrast ratio is currently well below 4.5:1. The text at the bottom of the page, which shows the number of directories and files also does not meet the contrast requirements for text.

• [x] The "Manage accounts" button has a visual label in the form of a letter that does not meet the contrast requirements and is barely recognizable.

Menu

• [x] Although the text with the storage specifications fulfills the contrast requirements, the contrast ratio may be just below the recommended value. To ensure that all users can read the text clearly and distinctly, it is advisable to improve the contrast even further.

Share

• [x] The size specifications and the note under "Public links" both do not meet the contrast requirements for text.

Edit shared Link

• [x] The date does not meet the contrast requirements for text.

Spaces

• The label of the "Search folder" input field does not meet the contrast requirements for text, as the contrast ratio is only approx. 2.9:1. [MOVED TO owncloud/android/issues/4365]

[jesmrec]

• Learn about contrast measure (what does 3:1 mean?) -> relation between both colors 1:1 to 21:1.
• Check if back and fore colors are part of the branding.
  • If they are brandable: suggest branding customer/branding team an alternative option
  • If not -> fix contrast
• Make colors brandable or for everyone in the vanilla app. ¿?

[Aitorbp]

Regarding the colors that need to be changed to meet the contrast requirements, the following research has been carried out: In the first instance, we wanted to use the colors that Android Studio has in the system (/Library/Android/sdk/platforms/android-33/data/res/values/colors.xml) and they met the contrast requirements. But these colors have two problems:

1. Some are private: When you try to access them, Android Studio does not let you compile the application because they are private and cannot be used by us.
2. It requires an API higher than 31: This restricts users with devices lower than Android 12 from having these colors. If an API lower than 31 is used, Android will set a default color. In this case, using the color system_accent1_500, Android set this purple color on the texts:

In conclusion, I would not use the colors found in the system due to these restrictions and instead, I would take the color that meets the contrast requirements and put it in our colors.xml file, so that we would avoid these restrictions.

If we use the High Contrast accessibility action from the device settings with this color, the behavior would be the same as if we took the color from the system.

Without high contrast fonts:

With high contrast fonts:

@TheOneRing here is the research and my conclusion on the system colors. If there are any other ideas, please let me know.

[Aitorbp]

This issue will be blocked until we know how to proceed with the toolbar elements. The background of the toolbar is brandable (actionbar_start_color) and with the current color of the image of the issue it does not meet the accessibility requirements. If these values ​​were left as default, the toolbar would meet these requirements. A possible solution is to set the color of the hint text and the cross of the toolbar as a brandable parameter, so that clients can adjust these values ​​to meet the contrast requirements. In this case we would be leaving the contrast in the hands of their branding. Also these texts come by default in Android, they are not altered by us. @tbsbdr @TheOneRing @jesmrec @JuancaG05

[TheOneRing]

Your approach sounds sensible, please continue. Could you please open an issue with ownBrander to amend the description for the brandable colors?

[jesmrec]

Could you please open an issue with ownBrander to amend the description for the brandable colors?

sure, i will take care

[JuancaG05]

• The "Manage accounts" button has a visual label in the form of a letter that does not meet the contrast requirements and is barely recognizable.

This one won't be addressed since the avatar is not generated in the app, it comes from the server

[JuancaG05]

• The labelling of the "Browse folder" input field does not meet the contrast requirements for texts, as the contrast ratio is only approx. 2.9:1.

• The label of the "Search folder" input field does not meet the contrast requirements for text, as the contrast ratio is only approx. 2.9:1.

These will be addressed in https://github.com/owncloud/android/issues/4365, where more changes to the toolbar will be applied

[jesmrec]

About ownBrander stuff. There are not many colors to brand there. Not all of them could be affected by non-matching-contrast colors. On the bottom, i am listing the ones that are affected which description should be updated in oB, if all of you agree

Splash screen background

Splash screen is built with that color on the background and the app icon in the foreground. Here, contrast is not affected since accessibility is not required (no information for dictation or reading)

Login screen

Almost everything is brandable in the login view. In that case, it's in the customer's hand to choose colors with correct contrast. On the other hand, there is no accessibility report regarding login view.

• Background color
• Text id and password
• Hint on id and password fields
• Background on the login button
• Text on the login button
• Connection status
• Error message

Accessibility contrast: delegated to customer.

Primary color

Well, after checking a little deeper, i'm disappointed with such option. Apart of the FAB, i did not find any place in the app where the "primary color" is set.

Accessibility contrast: The icons inside the buttons are white, so, the color should not be close to the white.

Primary text color

Text color used within the same buttons as the primary color. I only found this as tint color for the bottom bar icons

Accessibility contrast: Should match with the Top bar color in the background

Top bar color

Color of the top bar. But used everywhere in the app: in the search bar, order bar, bottom bar. Also, as color in the details view. That seems to be the real primary color of the app.

Accessibility contrast: The search bar, as we already know, will need a tweak. This color is also used in the details view. I don't like this but we can live with it if the color it not close to the white background.

|||

General menu header

Background color on the drawer.

Accessibility contrast: Text is white, so, the color should not be close to the white.

Color of the space card (oCIS)

Color of the space card.

Accessibility contrast: view background is white and text inside is black. Something to be careful of, but in the hands of the customers.

Where should we warn customers about contrast requirements:

• Login Screen
• Primary text color (because collisions with top bar)
• Top bar, because some text is tinted with it

The others, that can collide with white and black could be also involved in problems, but it sounds more weird to have these cases... open to ideas here.