Boroji Posted August 11, 2020 Share Posted August 11, 2020 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-acc8e5https://colourcontrast.cc/https://webaim.org/resources/contrastchecker/ I also attached a video explaining the feature request. Regards, Hossein Affinity-Feature-Request.mp4 glyph, The3Emran, Mithferion and 2 others 5 Quote Link to comment Share on other sites More sharing options...
Jochen Damm Posted September 6, 2020 Share Posted September 6, 2020 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. Boroji 1 Quote Link to comment Share on other sites More sharing options...
Mithferion Posted September 6, 2020 Share Posted September 6, 2020 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! dominik and Boroji 1 1 Quote AMD FX 8350 :: Radeon HD 5670 :: Windows 10 :: http://mithferion.deviantart.com/ Oxygen Icons :: GCP Icons :: iOS 11 Design Resources :: iOS App Icon Template :: Free Quality Fonts (Commercial Use) :: Public Domain Images How to do High Quality Art :: Mesh Warp / Distort Tool Considerations :: Select Same / Object - Suggestions :: Live Glassmorphism Effect Link to comment Share on other sites More sharing options...
Jochen Damm Posted September 9, 2020 Share Posted September 9, 2020 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. Boroji 1 Quote Link to comment Share on other sites More sharing options...
Mithferion Posted September 17, 2020 Share Posted September 17, 2020 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! Quote AMD FX 8350 :: Radeon HD 5670 :: Windows 10 :: http://mithferion.deviantart.com/ Oxygen Icons :: GCP Icons :: iOS 11 Design Resources :: iOS App Icon Template :: Free Quality Fonts (Commercial Use) :: Public Domain Images How to do High Quality Art :: Mesh Warp / Distort Tool Considerations :: Select Same / Object - Suggestions :: Live Glassmorphism Effect Link to comment Share on other sites More sharing options...
Mithferion Posted September 19, 2020 Share Posted September 19, 2020 Webflow added this. I think I'll give it a try some time: https://webflow.com/blog/color-contrast-analyzer Best regards! Boroji 1 Quote AMD FX 8350 :: Radeon HD 5670 :: Windows 10 :: http://mithferion.deviantart.com/ Oxygen Icons :: GCP Icons :: iOS 11 Design Resources :: iOS App Icon Template :: Free Quality Fonts (Commercial Use) :: Public Domain Images How to do High Quality Art :: Mesh Warp / Distort Tool Considerations :: Select Same / Object - Suggestions :: Live Glassmorphism Effect Link to comment Share on other sites More sharing options...
baoyu Posted September 29, 2020 Share Posted September 29, 2020 +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. Boroji 1 Quote Link to comment Share on other sites More sharing options...
Elise Kleve Posted October 20, 2021 Share Posted October 20, 2021 +1 Totally. Quote Desktop: Affinity Publisher 1.8.5, Windows 10 Professional, version 2004 (19041.450), 16GB memory, AMD Ryzen 5 3600 @ 3.60GHz, RX 570 Laptop: Affinity Publisher 1.8.2, Windows 10 Home, version 2004 (19041.450), 8GB memory, Intel Core i5-4200M @ 2.50GHz, Intel HD Graphics 4600 Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.