Improvement of contrast in main page to conform to WCAG level AAA. #39

fsologureng commented 2022年12月15日 05:47:32 +01:00

Improved contrast in the main parts of the homepage.

Hero widget is still only dark; I understand it is in progress but I remarked the colours for dark mode.

• In general, the contrast needed for dark mode is 1000 minus the value of light mode as the backgrounds of one and the other are almost black and white, respectively.
• I'm a total newbie to Astro+Willwind CSS so I can't figure out how to set the colour of the <p> in the Get Involved section without a cherry pick. I understand that inherits a global style. The contrast is too low for that size in dark mode. It should lighten up to text-steel-200 or something like that.
• I hope you haven't lost the fiery look of the phrase "We forge"; I've changed the direction of the gradient to improve the contrast at the top of the fonts to keep some more of the orange. The contrast was too low in dark mode.

Improved contrast in the main parts of the homepage. Hero widget is still only dark; I understand it is in progress but I remarked the colours for dark mode. * In general, the contrast needed for dark mode is 1000 minus the value of light mode as the backgrounds of one and the other are almost black and white, respectively. * I'm a total newbie to Astro+Willwind CSS so I can't figure out how to set the colour of the `<p>` in the Get Involved section without a cherry pick. I understand that inherits a global style. The contrast is too low for that size in dark mode. It should lighten up to text-steel-200 or something like that. * I hope you haven't lost the fiery look of the phrase "We forge"; I've changed the direction of the gradient to improve the contrast at the top of the fonts to keep some more of the orange. The contrast was too low in dark mode.

caesar commented 2022年12月15日 09:14:01 +01:00

How are you testing for this? The Accessibility pane of the Firefox web dev tools doesn't show any contrast issues on the current homepage (apart from a one-character separator in the footer that is too dark).

I'd love to be able to test this whilst making changes myself, so if you could let me know what tool you're using that would be great.

As for the actual changes, I'm happy with lightening most of the text – though to me it does make it harder to read having such harsh contrast with light on dark text.

But the changes in colour of the gradient text look pretty ugly to me and the "hot metal" look is completely lost – I'd rather find another solution if possible. Does the difference have to be that pronounced? Again, if I had a tool that showed the issues you want to fix it would help me to play with different options.

How are you testing for this? The Accessibility pane of the Firefox web dev tools doesn't show any contrast issues on the current homepage (apart from a one-character separator in the footer that is too dark). I'd love to be able to test this whilst making changes myself, so if you could let me know what tool you're using that would be great. As for the actual changes, I'm happy with lightening most of the text – though to me it does make it harder to read having such harsh contrast with light on dark text. But the changes in colour of the gradient text look pretty ugly to me and the "hot metal" look is completely lost – I'd rather find another solution if possible. Does the difference have to be that pronounced? Again, if I had a tool that showed the issues you want to fix it would help me to play with different options.

rohandebsarkar commented 2022年12月15日 11:23:10 +01:00

Lighthouse PageSpeed Insights gives a good list of suggestions to improve the accesibility and the performance of the site.

Example report: https://pagespeed.web.dev/report?url=https%3A%2F%2Fforgejo.org%2F.

This reports can also be generated locally using chromium.

Lighthouse PageSpeed Insights gives a good list of suggestions to improve the accesibility and the performance of the site. Example report: https://pagespeed.web.dev/report?url=https%3A%2F%2Fforgejo.org%2F. This reports can also be generated locally using chromium.

caesar commented 2022年12月15日 11:34:35 +01:00

I tried that @rohandebsarkar, but it doesn't show any problem with the contrast on any of the things @fsologureng is suggesting should be changed.

In dark mode Lighthouse gives a 100% score for accessibility. In light mode there's one button with insufficient contrast; I'll adjust that.

That said, I assume it's checking against WGAC level AA.

Even the W3C says:

It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.

... and all the (free) tools I've fond only test level AA.

I tried that @rohandebsarkar, but it doesn't show any problem with the contrast on any of the things @fsologureng is suggesting should be changed. In dark mode Lighthouse gives a 100% score for accessibility. In light mode there's one button with insufficient contrast; I'll adjust that. That said, I assume it's checking against WGAC level AA. Even the W3C [says](https://www.w3.org/WAI/WCAG21/Understanding/conformance#levels): > It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content. ... and all the (free) tools I've fond only test level AA.

fsologureng commented 2022年12月15日 17:20:07 +01:00

Sorry for the delay in replying, yesterday I wanted to request a pull early enough to interact with you before sleep but I did it in the wrong place >.<. And today I've been busy with personal commitments.

How are you testing for this? The Accessibility pane of the Firefox web dev tools doesn't show any contrast issues on the current homepage (apart from a one-character separator in the footer that is too dark).

I'd love to be able to test this whilst making changes myself, so if you could let me know what tool you're using that would be great.

I have used the Firefox Accessibility pane, Free Accessibility Browser Extension from project axe-core of Deque and WCAG Contrast Checker extension (because have a Privacy policy)

As for the actual changes, I'm happy with lightening most of the text – though to me it does make it harder to read having such harsh contrast with light on dark text.

You can adjust your monitor to improve your own experience, but contrast ratio is an objectiv measure.

Today I just see:

• the contrast issue of the download button in light mode
• the contrast issue of the tagline, and
• the contrast issue of the phrase "Forge great software with Forgejo"

Apparently I tried to fix an obsolete version.

But the changes in colour of the gradient text look pretty ugly to me and the "hot metal" look is completely lost – I'd rather find another solution if possible. Does the difference have to be that pronounced? Again, if I had a tool that showed the issues you want to fix it would help me to play with different options.

This is a recurrent issue when we measure the experience from our sighted point of view. If we want to embrace accessibility we forgoing certain aspects of appearance in favour of content. I am very sure that the solution could be much better than mine, but the two items with problems are essential parts of the message, so I think a solution is needed.

Sorry for the delay in replying, yesterday I wanted to request a pull early enough to interact with you before sleep but I did it in the wrong place >.<. And today I've been busy with personal commitments. > How are you testing for this? The Accessibility pane of the Firefox web dev tools doesn't show any contrast issues on the current homepage (apart from a one-character separator in the footer that is too dark). > > I'd love to be able to test this whilst making changes myself, so if you could let me know what tool you're using that would be great. > I have used the Firefox Accessibility pane, [Free Accessibility Browser Extension](https://www.deque.com/axe/browser-extensions/) from project [axe-core of Deque](https://github.com/dequelabs/axe-core) and [WCAG Contrast Checker extension](https://rumoroso.bitbucket.io/) (because have a Privacy policy) > As for the actual changes, I'm happy with lightening most of the text – though to me it does make it harder to read having such harsh contrast with light on dark text. You can adjust your monitor to improve your own experience, but contrast ratio is an objectiv measure. Today I just see: * the contrast issue of the download button in light mode * the contrast issue of the tagline, and * the contrast issue of the phrase "Forge great software with Forgejo" Apparently I tried to fix an obsolete version. > > But the changes in colour of the gradient text look pretty ugly to me and the "hot metal" look is completely lost – I'd rather find another solution if possible. Does the difference have to be that pronounced? Again, if I had a tool that showed the issues you want to fix it would help me to play with different options. This is a recurrent issue when we measure the experience from our sighted point of view. If we want to embrace accessibility we forgoing certain aspects of appearance in favour of content. I am very sure that the solution could be much better than mine, but the two items with problems are essential parts of the message, so I think a solution is needed.

fsologureng commented 2022年12月15日 18:07:17 +01:00

That said, I assume it's checking against WGAC level AA.

Even the W3C says:

It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.

I think this sentence is taken out of context; if this site had many videos or large image galleries, it is obvious that we cannot provide a strict level of compliance or a good alternative experience for visually impaired people, but a source code forge is like a meta software where non-sighted people could collaborate to develop software for non-sighted people, multiplying the effect of accessibility. The intention of compliance must be followed by the best effort and the well-intentioned goal of achievement, because we, as sighted people, can make the effort to provide accessibility. Otherwise sighted people will not have a good experience, nor will they be able to remedy it, because they cannot emulate the experience of a sighted person.

Ultimately, this is a matter of privilege, and I trust and hope that Forgejo will be a key player in changing the approach. As I have written elsewhere, this is not an issue of choices or characteristics, this is an issue of human rights.

> That said, I assume it's checking against WGAC level AA. > > Even the W3C [says](https://www.w3.org/WAI/WCAG21/Understanding/conformance#levels): > > > It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content. > I think this sentence is taken out of context; if this site had many videos or large image galleries, it is obvious that we cannot provide a strict level of compliance or a good alternative experience for visually impaired people, but a source code forge is like a meta software where non-sighted people could collaborate to develop software for non-sighted people, multiplying the effect of accessibility. The intention of compliance must be followed by the best effort and the well-intentioned goal of achievement, because we, as sighted people, can make the effort to provide accessibility. Otherwise sighted people will not have a good experience, nor will they be able to remedy it, because they cannot emulate the experience of a sighted person. Ultimately, this is a matter of privilege, and I trust and hope that Forgejo will be a key player in changing the approach. As I have written elsewhere, this is not an issue of choices or characteristics, this is an issue of human rights.

caesar commented 2022年12月15日 20:02:07 +01:00

Thanks @fsologureng, I'll take another look at this a bit later (I'm in mobile at the moment).

Thanks @fsologureng, I'll take another look at this a bit later (I'm in mobile at the moment).

fsologureng commented 2022年12月15日 22:38:00 +01:00

@caesar I have been thinking about left the dark mode as it is already and provide a good contrast view in the light mode. What do you think? (with an alert somewhere to indicate that option, obviously).

Contrast is in the limit even for AA between the logo and its background in dark mode :'(, the same happen with the svg's that point each feature, and the mascot as already pointed out @gapodo is in very low contrast yet.

I mean, you can provide logo, svg's and mascot in a (not so cool) way for the light mode to provide a good and accessible view of the site, without sacrifice the coolness of the dark view.

Maybe the mascot at natural as David provided it it is cool too ;)

PD: For evidence: in this contrast checker you can test the relation between the orange of the logo and the features svg's (#FF5000) and the white background. Or orange against the bg-steel-700 (#242E38) of the dark mode.
Dark mode is much better than the white with the orange, but insufficient to fully appreciate the logo for some people.

@caesar I have been thinking about left the dark mode as it is already and provide a good contrast view in the light mode. What do you think? (with an alert somewhere to indicate that option, obviously). Contrast is in the limit even for AA between the logo and its background in dark mode :'(, the same happen with the svg's that point each feature, and the mascot as [already pointed out @gapodo](https://codeberg.org/forgejo/meta/issues/2#issuecomment-725917) is in very low contrast yet. I mean, you can provide logo, svg's and mascot in a (not so cool) way for the light mode to provide a good and accessible view of the site, without sacrifice the coolness of the dark view. Maybe the mascot at natural as David provided it it is cool too ;) PD: For evidence: in [this contrast checker](https://webaim.org/resources/contrastchecker/) you can test the relation between the orange of the logo and the features svg's (#FF5000) and the white background. Or orange against the bg-steel-700 (#242E38) of the dark mode. Dark mode is much better than the white with the orange, but insufficient to fully appreciate the logo for some people.