jfoucry / Pilldroid

Gestion théorique de stock de médicament
Other
3 stars 2 forks source link

Improve welcome activity #24

Closed Jean-BaptisteC closed 3 months ago

Jean-BaptisteC commented 4 months ago

This PR improves welcome activity:

Before After
jfoucry commented 4 months ago

Hello @Jean-BaptisteC

You may right but before my eye surgery, the "big" white surface are hard for me to read. So I will keep your PR, but will ask to a half blind friend of mine some advises.

Jean-BaptisteC commented 4 months ago

We can use a grey color :)

jfoucry commented 4 months ago

ping https://github.com/notabene

notabene commented 4 months ago

@jfoucry :

WCAG says:

(Contrast Level AA)[https://www.w3.org/WAI/WCAG22/quickref/#contrast-minimum]

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

(Non-text Contrast Level AA)[https://www.w3.org/WAI/WCAG22/quickref/#non-text-contrast}

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s): User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;

Basically what this means is:

Neither rule is OK in the colours chosen. (Sorry for the telegraphic style, I'm aiming at efficiency and have a lot on my plate.)

What I would suggest off the top of my head:

jfoucry commented 4 months ago

@jfoucry :

* Black on Orange is [9.88522](https://contrast-finder.tanaguru.com/result.html?foreground=%23000000&background=%23fb9c26&ratio=4.5&isBackgroundTested=false&algo=Rgb) so contrast passes ✅

* White on orange is [2.12438](https://contrast-finder.tanaguru.com/result.html?foreground=%23fff&background=%23FB9C26&ratio=4.5&isBackgroundTested=false&algo=Rgb) so it doesn't pass ⚠️

WCAG says:

(Contrast Level AA)[https://www.w3.org/WAI/WCAG22/quickref/#contrast-minimum]

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

(Non-text Contrast Level AA)[https://www.w3.org/WAI/WCAG22/quickref/#non-text-contrast}

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s): User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;

Basically what this means is:

* Your small text should have a contrast of AT LEAST 4.5:1 against the background

* Your pictogram should have a contrast of AT LEAST 3:1 against the background.

Neither rule is OK in the colours chosen. (Sorry for the telegraphic style, I'm aiming at efficiency and have a lot on my plate.)

What I would suggest off the top of my head:

* Darken the orange so that the pictogram can have a proper contrast (eg. `#E17A18`)

* Change accompanying text from white to black.

Merci de ton passage en revue.

Jean-BaptisteC commented 4 months ago

Ok, I do not update color of drawables and dot light Just improve horizontal alignment between dots and button.