Administrator Creating a User Colors Problem

[amughalbscs16]

When you are creating a user through adminstrator it's color of text and background is same and hence we cannot see the text display and hence becomes very difficult to create a new user. The URL Where the problem is occuring http://localhost/LibreHealth/LibreEHR/interface/main/tabs/main.php?url=TAB_ONE_DEFAULT ![cannot see the text when user is created] (https://user-images.githubusercontent.com/28474804/37209517-60afcd66-23c7-11e8-8150-431c326451ff.png)

[aethelwulffe]

What I hear you saying is that it is possible to set the background and font to the same color, and that should be dis-allowed for practical reasons, yes? I think that the WCAG standards need not be followed when a user selects their own colors, but allowing them to brick the install by setting it 1:1 probably should be disallowed.

My suggestion: Check the contrast allowance limits of the input. Then, if it falls below a certain level, display the warning and the contrast value. If it falls below a floor threshold, adjust the values to the minimum relative RGB ratios.

Hex colors are easy to convert into integers, but RGB is required for real contrast perception across various screen brightness intensities. More so, you can convert to YIQ (ref https://en.wikipedia.org/wiki/YIQ ) I prefer to work with HSV myself, but apparently there isn't a lot of native function support for that in PHP or JS, unlike C++, and requires more calculations: The below case is for a high contrast minimum that should meet standards:

In PHP:

function getContrastYIQ($hexcolor){
    $r = hexdec(substr($hexcolor,0,2));
    $g = hexdec(substr($hexcolor,2,2));
    $b = hexdec(substr($hexcolor,4,2));
    $yiq = (($r*299)+($g*587)+($b*114))/1000;
    return ($yiq >= 128) ? 'black' : 'white';
}

In JavaScript:

function getContrastYIQ(hexcolor){
    var r = parseInt(hexcolor.substr(0,2),16);
    var g = parseInt(hexcolor.substr(2,2),16);
    var b = parseInt(hexcolor.substr(4,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? 'black' : 'white';
}

HSV/RGB sliding calculators would be nice, but the intention was to use the browser color pickers. https://snook.ca/technical/colour_contrast/colour.html has a cool tool (source index at https://snook.ca/technical/colour_contrast ). So, at a minimum, I would just check the hexadecimal color and make sure they are not very nearly equal. That keeps the input issue in the native browser color picker. I would automatically adjust the FONT saturation, not the background, if a minimum ratio is not reached.

ON THE OTHER HAND: If it is decided we have too many issues with this sort of thing, then the truth is that we don't need a color picker. Instead, we need a contrast picker that can deal with two values. The code above would then help.

[naveen17797]

@aethelwulffe https://stackoverflow.com/questions/1633828/distance-between-colours-in-php there is a valid point in this thread, as color perception is not linear towards all the colors, will the function work on that too?

[aethelwulffe]

Well, yes, the function basically takes care of that, however, there are cases where someone might WANT low contrast (security reasons, view in low ambient light and not wanting a glaring screen etc...) so the color picker as it stands is totally reasonable. Using the function to evaluate or guide the user's choice would be nice, but the control freak in me says let people do whatever the heck they want.

[naveen17797]

there is a live preview of colors chosen as soon as they leave color picker, a few tweaks on live preview would help better in my point of view.

[aethelwulffe]

Yes, and that is good. The "contrast meter" idea would be cool, but what you have is still good. We still need to restrict people from setting the background and foreground to the same color though.

[naveen17797]

yep, i will make a research on it, need to do some research on color stuff to understand things.

[aethelwulffe]

Hey, it really is a good UI design aspect to gain familiarity with.

Similarly, layout in content management systems (like this stupid one) has gone away from using the whole widescreen field of view for an endless hell of scrolling because the software nerds were told that a sheet of A4 paper was the best way to read a screen. For reading text, that is true. For handling data in an aircraft control tower, that is not true. If it looks good on mobile, and it doesn't have special considerations for mobile, then the desktop layout is probably total crap.

That said, learning control and flow layout is NOT something that is well represented on the web. Here is the closest thing to a related document I could find out there in a quick search: http://www.vldb.org/conf/1999/P58.pdf Mostly useless.
HMI design, as an engineer, is what separates a good tool from useless tools. (Human Machine Interface). Software folks don't really seem to have formal theory training in any of that.