• WANTED: Happy members who like to discuss audio and other topics related to our interest. Desire to learn and share knowledge of science required. There are many reviews of audio hardware and expert members to help answer your questions. Click here to have your audio equipment measured for free!

SINAD table colour brackets

pozz

Слава Україні
Forum Donor
Editor
Joined
May 21, 2019
Messages
4,036
Likes
6,825
This is as good as I can get them.
Blue rgb(20, 145, 190)
Green rgb(125, 185, 60)
Yellow rgb(240, 177, 35)
Orange rgb(240, 125, 25)

Red rgb(240, 10, 0)
Anyone have suggestions?
 

day7a1

Member
Forum Donor
Joined
Aug 30, 2019
Messages
70
Likes
53
Location
United States
Anyone have suggestions?

Actual colorblind person here. The Green, Yellow, and Orange are all too close together. You can look at the RGB values and see that Yellow and Orange are hardly any different at all. I can tell the difference, but my problem is with R. For someone who has a problem with G they're the same color. And that's a more common problem.

I would suggest pulling more R out of the Green. Try 60,185,60.
Then try adding a bit more G to the Yellow. Try 240,216,35.

The other colors should be fine. The numbers I posted aren't strict, but the general addition of dynamic range in problem colors will help. For pure protans or deutans you can think of it as losing the R or G value completely, but that's overly restrictive, we use other cues like position and apparent brightness. So if you need to deviate a bit to make them look good it's probably fine.

Unfortunately unless you want to move away from standard color coding you're a bit restricted. The whole green/yellow/orange thing is horrible, but common. You'll find that I use a lot of bright pink in place of reds when I can, but I wouldn't force that onto others!
 

AudioSceptic

Major Contributor
Joined
Jul 31, 2019
Messages
2,691
Likes
2,534
Location
Northampton, UK
So I've spent the early part of the day deciding the look of the charts/links. They look like this: https://www.audiosciencereview.com/...easurement-comparison-charts.8246/post-207205

I then got sidetracked by a suggestion @amirm made, which was to add a geometric mean (let's call it geomean for short) to each chart. For fun I also calculated the absolute deviation from the geomean (let's call it a GMAD). It's an indication of how far on average the measured values are from the geomean on either the positive or negative side.

If we say that the dataset is a good representation of what's available on the market and you decide to buy a random piece of hardware, you're likely to fall within the GMAD range. How likely are you to fall within that range, i.e., what's the probability? No idea. That's beyond me to calculate.

Anyway, for DACs the geomean/GMAD for SINAD is 95dB/11dB or 15.8 bits/1.8 bits. It's interesting because it shows the tendency is to be around, but slightly below, 16-bit CD resolution. Which means that it was a good call to base the SINAD charts (at least for DACs) on CD resolution, but also that the industry has moved forward by about 12dB if we're to judge by @LTig's 83dB SINAD measurement of his 1991 Arcam Black Box 3 Mk1.

Back to the linking.
Interesting use of geomean. It's normally used to combine several properties with different ranges into a single value. What is the logic here over the more obvious mean or median?

Oh, and great work!
 

pozz

Слава Україні
Forum Donor
Editor
Joined
May 21, 2019
Messages
4,036
Likes
6,825
Last edited:

day7a1

Member
Forum Donor
Joined
Aug 30, 2019
Messages
70
Likes
53
Location
United States
Look good?
The green is much better, thank you.

The yellow actually looks like yellow, but yellow in general has that tendency to fade into white regardless for everyone. Gold is yellow, no? I can't see how this looks other than simple readability. Going small, everything looks good. I mean, red looks black, but you won't be able to fix that nor should you try. ;)

Blue rgb(20, 145, 190)
Green rgb(60, 185, 60)
Yellow rgb(194, 194, 0)
Orange rgb(240, 125, 25)
Red rgb(240, 10, 0)


Blue rgb(20, 145, 190)
Green rgb(60, 185, 60)
Yellow rgb(194, 194, 0)
Orange rgb(240, 125, 25)

Red rgb(240, 10, 0)
 

AudioSceptic

Major Contributor
Joined
Jul 31, 2019
Messages
2,691
Likes
2,534
Location
Northampton, UK
The green is much better, thank you.

The yellow actually looks like yellow, but yellow in general has that tendency to fade into white regardless for everyone. Gold is yellow, no? I can't see how this looks other than simple readability. Going small, everything looks good. I mean, red looks black, but you won't be able to fix that nor should you try. ;)

Blue rgb(20, 145, 190)
Green rgb(60, 185, 60)
Yellow rgb(194, 194, 0)
Orange rgb(240, 125, 25)
Red rgb(240, 10, 0)


Blue rgb(20, 145, 190)
Green rgb(60, 185, 60)
Yellow rgb(194, 194, 0)
Orange rgb(240, 125, 25)
Red rgb(240, 10, 0)
I found a long time ago that with pale colours such as yellow, a grey background makes all the difference. Try different % grey to see what works best for any given range of colours.
 

pozz

Слава Україні
Forum Donor
Editor
Joined
May 21, 2019
Messages
4,036
Likes
6,825
@AudioSceptic Unfortunately RGB is all we have to work with.

Thanks @day7a1. I rarely look at colours this analytically. I'm glad you stepped to make this part of the site more visually accessible.
 

pozz

Слава Україні
Forum Donor
Editor
Joined
May 21, 2019
Messages
4,036
Likes
6,825
Interesting use of geomean. It's normally used to combine several properties with different ranges into a single value. What is the logic here over the more obvious mean or median?

Oh, and great work!
It's an extension of that application. The geomean's use when comparing disparate ranges is a kind of normalization. The effect is similar when applied to a single set with wide variances in the available data.

This property makes it preferable to the arithmetic mean and the median, which aren't sensitive to skewing or data evenness and so work better with large sample sizes (while ours will tend to be comparitively small).

For the DAC chart it might be said that the distinction is not a big deal and the geomean/arithmean will be close because of that smooth gradation of values from the center or either end. But note that both ends of the range have little hops in value, and these are more frequent at the low end. This shows how much more comparably difficult excellent engineering and performance are to achieve, while poor engineering is more common and its impacts are much more pronounced. This slight skewing downwards will show up in the geomean.
 

AudioSceptic

Major Contributor
Joined
Jul 31, 2019
Messages
2,691
Likes
2,534
Location
Northampton, UK
It's an extension of that application. The geomean's use when comparing disparate ranges is a kind of normalization. The effect is similar when applied to a single set with wide variances in the available data.

This property makes it preferable to the arithmetic mean and the median, which aren't sensitive to skewing or data evenness and so work better with large sample sizes (while ours will tend to be comparitively small).

For the DAC chart it might be said that the distinction is not a big deal and the geomean/arithmean will be close because of that smooth gradation of values from the center or either end. But note that both ends of the range have little hops in value, and these are more frequent at the low end. This shows how much more comparably difficult excellent engineering and performance are to achieve, while poor engineering is more common and its impacts are much more pronounced. This slight skewing downwards will show up in the geomean.
Thanks. Yes, that works. :)
 
OP
martijn86

martijn86

Active Member
Joined
Aug 30, 2019
Messages
271
Likes
975
Location
The Netherlands
This is as good as I can get them.

Anyone have suggestions?

Hey! I think I can help a little in this regard as well. Opinions and guesswork is not the way forward I think. There are scientifically based guidelines available for the readability of colors in and under text.
WCAG 2.1 said:
Success Criterion 1.4.3 Contrast (Minimum)
(Level AA)
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1.
Source

WCAG 2.1 said:
Success Criterion 1.4.6 Contrast (Enhanced)
(Level AAA)
The visual presentation of text and images of text has a contrast ratio of at least 7:1.
Source

There are many tools that can help you determine if two colors are at the correct contrast ratio. But it may even be easier to get some inspiration from The Photon Design principles or The Material Design Color-Tool. I don't know if BBCode 3.0 is or can be supported on this forum but that will allow highlighting text, tables or divbox for example and make it easier to style the list.
 
Last edited:

pozz

Слава Україні
Forum Donor
Editor
Joined
May 21, 2019
Messages
4,036
Likes
6,825
There are scientifically based guidelines available for the readability of colors in and under text.
Converting to hexidecimal, and estimating the background colour of quoted text as #EFEFEF, gives these ratios:
Blue rgb(20, 145, 190) = #1491BE (3.1:1)
Green rgb(60, 185, 60) = #3CB93C (2.2:1)
Yellow rgb(194, 194, 0) = #C2C200 (1.7:1)
Orange rgb(240, 125, 25) = #F07D19 (2.4:1)
Red rgb(240, 10, 0) = #F00A00 (3.8:1)
Well, we tried. One thing about the WCAG 4.5:1 recommendation is that it applies to readability in general. Not to special-use cases (with logos, for example, there is no standard). Larger text requires a minimum of a 3:1 ratio.

If these colours prove to be a barrier we can change things up.
 

pozz

Слава Україні
Forum Donor
Editor
Joined
May 21, 2019
Messages
4,036
Likes
6,825

day7a1

Member
Forum Donor
Joined
Aug 30, 2019
Messages
70
Likes
53
Location
United States
How does it look to your eye?
Normally I would do the work myself so you didn't have to, but since you already found where the contrast formula is I'll let you do it again.

You want to measure the contrast between the two colors that are near each other, so Blue vs. Green, Green vs. Yellow, etc., not with the background (for accessibility).

"With this technique, a relative luminance (lightness) difference of 3:1 or greater with the text around it can be used if additional visual confirmation is available when a user points or tabs to the link. "
 

day7a1

Member
Forum Donor
Joined
Aug 30, 2019
Messages
70
Likes
53
Location
United States
For reference,

What set of colors are already in use here? I can't see the difference between green, yellow, and orange at all!


Did I make it worse!?!?

Edit: Those aren't my colors, according to eyedropper, but it still may be easier to just bracket them or use some other non-color based differentiator. The bar colors are fine, it's a bit hard to pin the transition from green to yellow, but there's enough "mass" there that I can find it.

The text version....I'm not sure if it'll ever get there. Just not enough color coming at me to see it and I only have moderate protanopia. Unless you want some crazy looking colorblind colors which would probably confuse 90% of the population rather than 10%.

Just a set of titles above each set of links with whatever color you choose would probably be the best solution and is IAW W3.
 
Last edited:
OP
martijn86

martijn86

Active Member
Joined
Aug 30, 2019
Messages
271
Likes
975
Location
The Netherlands
If we use colors in BBCodes pallet, they can change with an accessibility style or a dark style for example.
 

day7a1

Member
Forum Donor
Joined
Aug 30, 2019
Messages
70
Likes
53
Location
United States
they can change with an accessibility style
Maybe, but even W3 recommends just not using color as the only differentiator. Personally, I've never seen color accessibility options that work well. They tend to either make other things worse or make it all look all crazy.

The best solution allows @pozz to do whatever colors look best. Then, above each change of color put the legend note for that color.

Probably should have been my suggestion from the get-go. Sorry pozz! Seeing the list in context made it obvious. I did want to bring accessibility into the convo before it was all decided upon, I hope you understand.
 
Top Bottom