[TYPO3-hci] colors in new skin (t3skin)

Uschi Renziehausen typo3news at otherone.de
Sat Jun 10 20:04:42 CEST 2006


Hello :))

Valery Romanchev wrote:
>>> I uninstall this new skin on every TYPO3 installation that I made.
>>> Old BackEnd is a bit outdated in design, but it is usable. New skin
>>> IMHO absolutly not usable.
>> This is where I don't get the point.
>> You are complaining about the new skin with the _grey_ background being to
>> bright, while the old skin with a _white_ background is not?!

It all depends on the difference between
a) difference in brightness between background and foreground color
b) difference in color between background and foreground color

There are rules/recommendations for this made up by the W3C (as most 
times a little bit 'overdone', and the 'hp-standard'). You do not have 
to know them by heart, there is a marvelous page around which does all 
the calculation for you:

http://juicystudio.com/services/colourcontrast.php

Under color contrast you can add your background- and foreground color 
and then get the result.

You do not have to follow the result strictly, but perhaps this is a 
good practice:
- The smaller the value of your font-size and your font-weight, the 
closer you should stick to the required values.
- The longer your lines are, the closer you should stick to the required 
  values.

Now, in the typo3 be gui, a form is divided through pseudo headlines 
which are styled in a darker grey with '3D'-effect (which makes is 
produced by a lighter grey).

If you make the above mentioned tests regarding the form dividers, the 
result is not even near the required values:

background color: something like #ADB3BF
foreground color: #FFFFFF

<snip>
The difference in brightness between the two colours is not sufficient. 
The threshold is 125, and the result of the foreground and background 
colours is 76.

The difference in colour between the two colours is not sufficient. The 
threshold is 500, and the result of the foreground and background 
colours is 222.
</snap>

In the main frame, those form-dividers (fieldsets they should be) take 
the full frame width and are EYE CATCHERS, means, your eyes will be 
constantly attracted by them, and in effect your eyes will get hurt.

> I am sorry, it is difficult to explain with my English.
> I can give example: if you have a picture with the sky and the sun.
> Sun will be #FFFFFF, sky will be grey that go to #FFFFFF smoothly.
> This sun on the pictire can can easyly brake you eyes when you look at this
> picture (this is effect of contrast I think).
> The same effect we have with new BackEnd skin.
>

I love this explanation :)))))))

Ciao, Uschi

>> BTW: The background color is not really grey but a "blue-ish white" and
> this
>> might be the problem.
>> It's the same effect you get with the front lights of modern cars, that
>> always look as if they had much more power than the old ones.
>> In fact the light's temperature is just closer to 9300K, which means more
>> blue.
> 
> May be you are right ( I do not know this desing/colors staff)
> 
>> But you are right, when you say it's no good way of working with
> backgrounds
>> being too bright.
>> This is why I don't like both of them, old _and_ new skin.
> 
> 
>> I suggest something else:
>> Place a some color pickers somewhere in the user setup so that you can
>> change the colors however you like.
> 
> Goog idea. This will be ideal solution, but this will reqre more job from
> developers of skin.
> 
> 
> Valery
> www.typo3lab.com
> 
> 



More information about the TYPO3-team-hci mailing list