Contrast Ratio Feature

[Boroji]

Hello,

If you guys could add these contrast ratio feature in Affinity, it would be a really great tool. Here are some links that checks the contrast of background and foreground color.
https://coolors.co/contrast-checker/112a46-acc8e5
https://colourcontrast.cc/
https://webaim.org/resources/contrastchecker/


I also attached a video explaining the feature request.


Regards,
Hossein

[Jochen Damm]

Hi,

on the german site leserlich.info you will find helpful calculators in German and English:

• Contrast calculator (Calculating and testing easily accessible colour combinations for screen and print)
  RGB for screen, CMYK for printed materials, also some color swatches like HKS or Oracal

• Font size calculator (Calculating and testing easily accessible font sizes from mobile devices and books to traffic and advertising signs)
  Calculates Distance in cm, Visual acuity, Ratio of x-height to font size, Text types (Reading text, Consultating text, Signalling text) and available Lighting

leserlich.info is a service offered by the German Federation of the Blind and Partially Sighted (Deutscher Blinden- und Sehbehindertenverband)

It would be nice to integrate. If it is possible to define presets you can add other guides as well. When you choose a font you can check it of size and contrast. Therefore you must have the possibility to measure cap height and x-height and setting them automatically. This helps especially with Art Text.

[Mithferion]

Very interesting idea. What I usually do to check contrast (on illustrations, for example) is to put a black rectangle over the area that I need to check, and change its Blendo Mode to Color.

That will give you a very good idea of the perceived light that you are getting from that imagen. Avoid simply using and HSL Adjustment to bring down the Saturation, because that gives worng results.

Best regards!

[Jochen Damm]

Mithferion,

you're right. It is an easy work around for checking contrasts. But - please correct me if I'm wrong - it doesn't suffice to check by estimation if you have to design objects that have strict rules regarding accessibility for visual impaired people. There are so many different difficulties people can have with their eyes. In my very own case: I have Keratoconus (progressive thinning of the cornea, may result in blurry vision, double vision, nearsightedness and light sensitivity). By classification I am concidered to have mild to moderate visual impairment and moderate to severe visual impairment without correction. But with correction (glasses/contact lenses) I am officially not impaired even if I feel like that.

In my case I need proper contrasts to see what's going on. If it's too dark I can't see stairs but I see black walls that aren't there - scared to run against them. This is irrelevant for my design process because I am not color blind and have a trained eye for color tones. My problem is double vision: several parts of the same image layered on top of each other but tilted and shifted. It has to be large enough that I can filter out that stuff in my brain.

But there are a lot of people that have color blindness. Approx. 5 to 10 percent of the population are affected. Official numbers are way smaller but there are always unreported cases that you should concider.

Here is an example about the different types of color blindness from Wikipedia:

 

Quote

 

Protanopia

Protanopes are more likely to confuse:-
1. Black with many shades of red
2. Dark brown with dark green, dark orange and dark red
2. Some blues with some reds, purples and dark pinks
3. Mid-greens with some oranges

Deuteranopes

Deuteranopes are more likely to confuse:-
1. Mid-reds with mid-greens
2. Blue-greens with grey and mid-pinks
3. Bright greens with yellows
4. Pale pinks with light grey
5. Mid-reds with mid-brown
6. Light blues with lilac

 

Quote by www.colourblindawareness.org

That is a very complex topic. If you would create a color pallete with red, orange and yellow tones - an autumn themed design - it may be possible thar some color blind people can't even read it because the tones look like the same color without any contrast. The same goes with blue and violet and so on.

[Mithferion]

On 9/9/2020 at 4:48 AM, Jochen Damm said:

But - please correct me if I'm wrong - it doesn't suffice to check by estimation if you have to design objects that have strict rules regarding accessibility for visual impaired people

You are not wrong in the slightest. There are several conditions that need to be addresed and what I mentioned covers just a small part of it.

Best regards!

[Mithferion]

Webflow added this. I think I'll give it a try some time:

https://webflow.com/blog/color-contrast-analyzer

Best regards!

[baoyu]

+1

I was planning to implement some visual identity helping software which allows collaborating designers to easily get the right VI elements and color according to their actual application senario.

 

[Elise Kleve]

+1
Totally.

[GeorgB]

It would be even better if a plugin could automatically measure the color contrast ratio. I imagine the functionality as follows: The plugin scans the entire layout and checks the contrast ratios. After the check, a report is output that indicates the contrast ratios and flags problematic contrast ratios.