[tw] [TW5] Presenting ColorAction Plugin for Colour Manipulation

[Thomas Elmiger]

Hello dear community members,

This is a result of my interest in optimizing the use of colours/colors in palettes and webdesign in general. Accessibility and user experience could be improved much on most websites only by optimizing contrasts 


At the moment I am using ColorAction in my Bricks CSS studio to create colour palettes where several definitions depend on other colours. See it in action here https://tid.li/tw5/test/bricks.html#%24%3A%2Fplugins%2Ftelmiger%2Fbricks%2Fpaletteeditor

The Plugin
=========

This plugin lets you work with one or two colors using one or two of these possibilities:

"actions" tell you something about a color

"modifications" calculate a new color based on an input color

additionally you can set an "alpha" value for the resulting color

"utilities" give you a random color or spin the color wheel

"two color actions" compare or combine colors in different ways (mix, alphablend, equality check, contrast, readability level)

The macro handles most methods from https://github.com/bgrins/TinyColor#methods plus an additional alphablend action.

Backup what you have and get it from https://tid.li/tw5/plugins.html

Readme, usage examples and license:
https://tid.li/tw5/plugins.html#%24%3A%2Fplugins%2Ftelmiger%2FColorAction

Have a colourful weekend!
Thomas

[coda coder]

Thomas... That was a lot of work, I can tell. High praise, indeed.

Post by Thomas Elmiger
Hello dear community members,
This is a result of my interest in optimizing the use of colours/colors in
palettes and webdesign in general. Accessibility and user experience could
be improved much on most websites only by optimizing contrasts 

At the moment I am using ColorAction in my Bricks CSS studio to create
colour palettes where several definitions depend on other colours. See it
in action here
https://tid.li/tw5/test/bricks.html#%24%3A%2Fplugins%2Ftelmiger%2Fbricks%2Fpaletteeditor
The Plugin
=========
"actions" tell you something about a color
"modifications" calculate a new color based on an input color
additionally you can set an "alpha" value for the resulting color
"utilities" give you a random color or spin the color wheel
"two color actions" compare or combine colors in different ways (mix,
alphablend, equality check, contrast, readability level)
The macro handles most methods from
https://github.com/bgrins/TinyColor#methods plus an additional alphablend
action.
Backup what you have and get it from https://tid.li/tw5/plugins.html
https://tid.li/tw5/plugins.html#%24%3A%2Fplugins%2Ftelmiger%2FColorAction
Have a colourful weekend!
Thomas

[@TiddlyTweeter]

Ciao Thomas

I can see the results on this. Your Bricks palette is very nice. I still
haven't figured out how to use the colour gadget yet to create my own. I'll
get there. I'm slow.

I'm seriously impressed with the design thinking you put into this. It
looks effective.

*VISION ISSUES*. One thing that occurred to me, that does come up
occasionally, is the need for palettes for users with vision issues ("8% of
men and 0.5% of women have a colour vision deficiency
<http://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/>"
(genetic) add to which more for age-related decline in colour vision
increases the numbers) .

Maybe your tool could ease the creation of palettes that assist them? As
far as I understand it *DEUTERANOMOLY* is the most common (fault with
perception of "green" but effects other colours too?).


Just, FWIW, one thing that interests me is palettes just in TWO COLOURS
with different levels of transparency. I think they good for interfaces
where you know where everything is. Not so much for public use, but for
private work where you want an interface that is as unobtrusive as
possible.

Best wishes
Josiah

Post by Thomas Elmiger
Hello dear community members,
This is a result of my interest in optimizing the use of colours/colors in
palettes and webdesign in general. Accessibility and user experience could
be improved much on most websites only by optimizing contrasts 


[Thomas Elmiger]

Hi Josiah, Coda and Simon

Thanks for your feedback – stay tuned, there might be an update over the
coming weekend :–)

I added better contrast calculation for light foreground on dark
transparent background.

(I think this is the last thing I can improve, so I might post to the dev
group too when I am done.)

@TiddlyTweeter <***@assays.tv> schrieb am Fr. 26. Jan. 2018 um

Post by @TiddlyTweeter
Ciao Thomas
I can see the results on this. Your Bricks palette is very nice. I still
haven't figured out how to use the colour gadget yet to create my own. I'll
get there. I'm slow.
I'm seriously impressed with the design thinking you put into this. It
looks effective.

It is ;–)

And my palettes get more and more effective whenever I add colors that
depend on each other.

Post by @TiddlyTweeter
*VISION ISSUES*. One thing that occurred to me, that does come up
occasionally, is the need for palettes for users with vision issues ("8%
of men and 0.5% of women have a colour vision deficiency
<http://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/>"
(genetic) add to which more for age-related decline in colour vision
increases the numbers) .

I am a light case of deuteranopia myself, that's one factor why I am very
aware of (lacking) contrast on the web.

Post by @TiddlyTweeter
Maybe your tool could ease the creation of palettes that assist them? As
far as I understand it *DEUTERANOMOLY* is the most common (fault with
perception of "green" but effects other colours too?).
Just, FWIW, one thing that interests me is palettes just in TWO COLOURS
with different levels of transparency. I think they good for interfaces
where you know where everything is. Not so much for public use, but for
private work where you want an interface that is as unobtrusive as
possible.

One of my ideas was to create palettes where you can adjust a few colours
only and get a nice and usable result. That's why I made this!

Post by @TiddlyTweeter
Best wishes
Josiah

Post by Thomas Elmiger
Hello dear community members,
This is a result of my interest in optimizing the use of colours/colors
in palettes and webdesign in general. Accessibility and user experience
could be improved much on most websites only by optimizing contrasts 


--
You received this message because you are subscribed to a topic in the
Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit
https://groups.google.com/d/topic/tiddlywiki/y6ckyVQBWPc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/c78c8829-650d-4e23-8b9f-6480836d0fea%40googlegroups.com
<https://groups.google.com/d/msgid/tiddlywiki/c78c8829-650d-4e23-8b9f-6480836d0fea%40googlegroups.com?utm_medium=email&utm_source=footer>
.
For more options, visit https://groups.google.com/d/optout.

[Thomas Elmiger]

Hi all,

There was an update over the weekend. Besides handling transparent backgrounds with dark colors differently, there are 2 new modification utilities:

* invert
* invertBrightness

More tests and examples were added here:

* https://tid.li/tw5/test/bricks.html#%24%3A%2Fplugins%2Ftelmiger%2Fbricks%2Freadability
* https://tid.li/tw5/test/bricks.html#Colour%20Variants

The new dark palette makes use of ColorActions, you can change to other palettes here:

* https://tid.li/tw5/test/bricks.html#%24%3A%2Fplugins%2Ftelmiger%2Fbricks%2Fpalettes

You are welcome to test and report back here!

Have a great week!
Thomas

[@TiddlyTweeter]

Ciao Thomas

What is the significance of"fail"? Should I be worried?



FWIW, the look of that TW is beautiful

Best wishes
Josiah

[Thomas Elmiger]

Ciao Josiah,

These colour combinations have too low contrast (value on the right).
Therefore they fail the WCAG 2.0 test for accessibility.

No reason to be worried.

Cheers,
Thomas

@TiddlyTweeter <***@assays.tv> schrieb am Mo. 29. Jan. 2018 um

Post by @TiddlyTweeter
Ciao Thomas
What is the significance of"fail"? Should I be worried?
FWIW, the look of that TW is beautiful
Best wishes
Josiah
--
You received this message because you are subscribed to a topic in the
Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit
https://groups.google.com/d/topic/tiddlywiki/y6ckyVQBWPc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/0a7f39ae-4e9d-4667-963e-626d22c14042%40googlegroups.com
<https://groups.google.com/d/msgid/tiddlywiki/0a7f39ae-4e9d-4667-963e-626d22c14042%40googlegroups.com?utm_medium=email&utm_source=footer>
.
For more options, visit https://groups.google.com/d/optout.

[@TiddlyTweeter]

Man, that is seriously clever on WCAG 2.0! I hope users realise how smart
this gadget is!

Post by Thomas Elmiger
These colour combinations have too low contrast (value on the right).
Therefore they fail the WCAG 2.0 test for accessibility.

Okay, there an oddity at 50-50 Lighten Black. I assume this is because the
foreground and background coincide? Might be worth a note on that?



Best wishes
Josiah

[Thomas Elmiger]

Hi Josiah

Other cases might be unreadable for other people with different vision,
this is just one of many possible cases, where the failure is obvious (and
you guessed the reason).

Maybe I should add a WCAG-Link in the plugin readme, where the
classification is explained:

- getReadability
- Returns the best grade of the following:
1. AAA small (>= 7:1)
2. AAA large/AA small (>= 4.5:1)
3. AA large (>= 3:1)
4. fail (< 3:1)

But honestly – did you get down there? You would have to invest heavily
into exploring accessibility subjects to make really accessible websites
with TW.

Semantic HTML-Structure with logic title hierarchy amongst other is another
topic (as tiddlywiki.com demonstrates in bricks design). And who puts
aria-labels on buttons or alt text on pictures in his or her TW? Not many.

So contrast is just one (visible) part that benefits many. I am happy if my
tool can help a little bit with that :)

Cheers
Thomas

@TiddlyTweeter <***@assays.tv> schrieb am Mo. 29. Jan. 2018 um

Post by @TiddlyTweeter
Man, that is seriously clever on WCAG 2.0! I hope users realise how smart
this gadget is!

Post by Thomas Elmiger
These colour combinations have too low contrast (value on the right).
Therefore they fail the WCAG 2.0 test for accessibility.

Okay, there an oddity at 50-50 Lighten Black. I assume this is because the
foreground and background coincide? Might be worth a note on that?
Best wishes
Josiah
--
You received this message because you are subscribed to a topic in the
Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit
https://groups.google.com/d/topic/tiddlywiki/y6ckyVQBWPc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/89ca4d88-d245-479b-ae97-3456720545e5%40googlegroups.com
<https://groups.google.com/d/msgid/tiddlywiki/89ca4d88-d245-479b-ae97-3456720545e5%40googlegroups.com?utm_medium=email&utm_source=footer>
.
For more options, visit https://groups.google.com/d/optout.

[@TiddlyTweeter]

Thomas ...

Post by Thomas Elmiger
Maybe I should add a WCAG-Link in the plugin readme, where the
classification is explained...

I think so. The point is you gone DEEP into colour. Even if nobody uses the
full thing I do think its worth flagging where you coming from.

I'm VERY interested in what is the COMMON CORE of colour presentation that
95% of folk perceive as more-or-less the same.

FWIW I have to deal with colour as part of my work for Angela Weyersberg's
art. Accurate reproduction of her colour on the web and in printing is a
NIGHTMARE. Its a disaster that still there are no decent standards on
hardware (monitors). There is NO universal calibration standard. We still
having to use VERY complex methods to calibrate devices. Screens need to be
scanned with calibration devices. Properly calibrated monitors cost
thousands and have in-built physical scanners. Printing needs to be done
and scanned with accurate, expensive, equipment to ensure fidelity with
originals.

Colour is a mess. A mess that needs taming.

Best wishes
Josiah

Post by Thomas Elmiger
Other cases might be unreadable for other people with different vision,
this is just one of many possible cases, where the failure is obvious (and
you guessed the reason).
Maybe I should add a WCAG-Link in the plugin readme, where the
- getReadability
1. AAA small (>= 7:1)
2. AAA large/AA small (>= 4.5:1)
3. AA large (>= 3:1)
4. fail (< 3:1)
But honestly – did you get down there? You would have to invest heavily
into exploring accessibility subjects to make really accessible websites
with TW.
Semantic HTML-Structure with logic title hierarchy amongst other is
another topic (as tiddlywiki.com demonstrates in bricks design). And who
puts aria-labels on buttons or alt text on pictures in his or her TW? Not
many.
So contrast is just one (visible) part that benefits many. I am happy if
my tool can help a little bit with that :)

[BurningTreeC]

Hello Thomas,

thank you for sharing, that's extremely useful!

BurningTreeC