Tekstkleur bij karmaverdeling: wit op geel slecht leesbaar

[hans3702]

Hallo

als ik onder profilen kijk bij karma verdeling, zijn naar ik vermoed de kleuren recentelijk aangepast echter witte tekst op een gele of andere pastel achtergrond is voor mij beperkt leesbaar.

Het zou leuk zijn als het kleuren team niet allen denkt aan mensen van 25 en die een nieuwe apple of eizo montior hebben maar ook de wat oudere tweaker met een bril en beperkt contrast in de orgen en mogelijk oudere of goedkopere monitor.

[Ravefiend]

Die aanpassing was eind maart gebeurd volgens plan: Bugbash en weghalen zwarte balk - Development-iteratie #152 .

Expected behavior, ook volgens Alle kleuren zijn bijna verdwenen in mijn profiel : ?

[hans3702]

inderdaad daar staat: Kleuren per karmatype i.p.v. per aandeel in je karmaverdeling. En mijn reactie daarop op is voor mij zijn de kleurkeuze van dien aart dat het niet tot moeilijk leesbaar is.

[F_J_K]

Het gaat hier inderdaad om de witte tekst op gele achtergrond. Dat lijkt me een bug.

LA --> SB en kleine topictitelaanpassing.

[ACM]

hans3702 schreef op dinsdag 9 april 2019 @ 14:10:
Hallo

als ik onder profilen kijk bij karma verdeling, zijn naar ik vermoed de kleuren recentelijk aangepast echter witte tekst op een gele of andere pastel achtergrond is voor mij beperkt leesbaar.

Het zou leuk zijn als het kleuren team niet allen denkt aan mensen van 25 en die een nieuwe apple of eizo montior hebben maar ook de wat oudere tweaker met een bril en beperkt contrast in de orgen en mogelijk oudere of goedkopere monitor.

De kleuren zijn juist bedoeld voor mensen met slecht zicht. Ze zouden zelfs als je effectief het equivalent van grijswaarden ziet nog te onderscheiden moeten zijn... Maar op een gegeven moment houdt het natuurlijk wel op, zeker omdat we zoveel verschillende kleuren moeten kunnen tonen.

Alleen dat dat wit dan niet altijd goed leesbaar is had ik niet bij stil gestaan
Ik heb overigens zo snel geen idee of we daar wel makkelijk per achtergrond dan een verschillende voorgrond bij kunnen maken. Want altijd zwart zal ook niet werken.

Ik heb zelf even deze custom css uitgeprobeerd, verbeterd dit het voor jou?

Cascading Stylesheet:

#karmaDistributionGraph .c3-chart-arc text {
   text-shadow: -1px -1px 1px #777, 1px 1px 1px #000;
}

Daarmee wordt een grijze en zwarte 'tekst schaduw' gemaakt, wat effectief ervoor zorgt dat het wit altijd grotendeels op een stukje grijs/zwart als achtergrond staat. Vergelijkbaar met ondertitels in video.

Als dit goed werkt, zal ik e.e.a. voorleggen aan onze designer om op te nemen in de normale css

[ Voor 3% gewijzigd door ACM op 09-04-2019 16:32 ]

[hans3702]

Het is beter leesbaar, geel blijft lastig en het totaalplaatje is een beetje als afgewassen kleding qua kleur stelling maar dat zal vast persoonlijk zijn en tegen de huidige mode / tijdgeest is van alles clean, frigide en soft.

Ik vind het ook niet echt belangrijke info maar als ik dan op die pagina kom stoort het toch dat het onduidelijk oogt :-)

Ook MS office 2016 / 2019 en dan met name Outlook vind ik een ramp om visueel houvast te hebben waar je naar kijkt een grijze brei maar dat is een beetje of tropic :-) al geeft het wel aan waar het mijn inziens de boot mist.

Mocht deze website met less ipv CSS werken dan zou je de tekst een formule tov de achtergrond kunnen geven.

Ik heb ook even gekeken hoe het is in grijstinten en dat is met mijn eigen diagram inderdaad goed te onderscheiden. al is hier witte tekst met geel ook matig. Toch attent om met achromatopsie rekening te houden.

Extra: https://www.frankwatching...oor-je-website-checklist/
Aanvullend onderzoek van de University of Illinois over kleurvoorkeuren laat de voorkeur voor tinten zien. Hieruit blijkt dat mannen meer houden van felle kleuren, terwijl vrouwen de voorkeur geven aan zachtere kleuren.
https://neilpatel.com/blog/gender-and-color/
Ik denk dat ik in het mannenkamp zit :-)


PS wederom dank je voor constructieve en oplossing gerichte antwoorden.

Deze CSS bevalt mij op dit moment beter, contrast en toch niet 100% zwart om in de sfeer van de kleurstelling te blijven, ook in grijstinten is het volgens mij heel duidelijk

Cascading Stylesheet:

 #karmaDistributionGraph .c3-chart-arc text {
   fill: #333;
}

[ Voor 25% gewijzigd door hans3702 op 09-04-2019 18:27 ]

[ACM]

hans3702 schreef op dinsdag 9 april 2019 @ 17:57:
Mocht deze website met less ipv CSS werken dan zou je de tekst een formule tov de achtergrond kunnen geven.

We gebruiken SASS, maar wat je zegt is helaas niet zo eenvoudig. De SASS is ontkoppeld van deze kleurenlijst omdat die uiteindelijk in gegenereerde javascript terecht komt en dat houden we natuurlijk liever niet op twee plekken bij. De label-kleuren zijn helaas alleen maar standaard aan te passen met CSS. Of eventueel met wat complexere functionaliteit zoals hier op stack overflow.

Extra: https://www.frankwatching...oor-je-website-checklist/
Aanvullend onderzoek van de University of Illinois over kleurvoorkeuren laat de voorkeur voor tinten zien. Hieruit blijkt dat mannen meer houden van felle kleuren, terwijl vrouwen de voorkeur geven aan zachtere kleuren.
https://neilpatel.com/blog/gender-and-color/
Ik denk dat ik in het mannenkamp zit :-)

We hebben een hele tijd geleden op basis van een topic over de grafieken in onze artikelen, waar diverse mensen met zichtproblemen in reageerden. Ik weet niet meer wat de specifieke problemen waren, maar naast de vrij gebruikelijke normale kleurenblindheden zou het inderdaad kunnen dat daar ook mensen met achromatopsie tussen zaten. Of die gewoon veel meer moeite met contrasten hadden.

Uiteindelijk ben ik toen gaan zoeken naar een bruikbare set kleuren voor die grafieken en heb samen met onze designer uit het gevonden palet een selectie gemaakt.

Datzelfde palet gebruikten we tot een paar weken geleden voor de karma-grafiek. Maar dat had als nadeel dat effectief altijd nummer de grootste kleur X kreeg en niet zozeer 'reacties', ongeacht of die het grootst was.
Daarna ben ik opnieuw naar diezelfde aanbeveling gegaan en heb daar een palet van in totaal 16 kleuren uitgepikt (ze gaan tot en met paletten van 29 stuks).

Voor meer informatie, dit is het palet dat na wat onderzoek een van de weinigen lijkt te zijn die veelvuldig wordt aanbevolen en een bruikbare lijst biedt voor ook wat grotere hoeveelheden kleuren. En het is natuurlijk mooi meegenomen dat het door een medewerker van het Nederlandse Ruimteonderzoeksinstituut is gemaakt

Uiteindelijk zijn dit alle kleuren die we voor de karma-grafiek gebruiken, de middelste heeft de door jou gekozen tekstkleur:

V&A	#D1BBD7	#D1BBD7
Reacties	#90C987	#90C987
Productreviews	#F1932D	#F1932D
Moderaties	#F7F056	#F7F056
Profiel	#AA6F9E	#AA6F9E
Weblog reacties	#E8601C	#E8601C
Downloadsubmits	#882E72	#882E72
Nieuwssubmits	#BA8DB4	#BA8DB4
Product review ratings	#1965B0	#1965B0
Shopreviews	#F6C141	#F6C141
Productverbeteringen	#5289C7	#5289C7
Weblog posts	#DC050C	#DC050C
Forum reacties	#7BAFDE	#7BAFDE
Productinformatie	#CAE0AB	#CAE0AB
Shop meldpunt	#72190E	#72190E
Topic relaties	#4EB265	#4EB265
"Overig"	#777777	#777777

Ik denk dat er uiteindelijk meer zijn waar jouw donkere kleur (of zwart) niet goed te lezen is dan het wit
Maar wellicht kunnen we wat doen met donker of licht aan de hand van de specifieke optie, zoals in de stackoverflow-link.

[hans3702]

Interessante info, ga ik zeker mee aan de slag voor eigen gebruik.
Ik heb maar een paar kleuren in mijn Karma en verwacht er ook niet meer te krijgen, voor mij voldoet dus de #333

Een kronkel voor kleuren kiezen, mogelijk eens een scripje laten lopen om te kijken welke onderdelen wel een % en geen % in de taart punt krijgen. Mijn vermoeden is dat je bij minder dan 5% geen waarde te zien krijgt in de taartpunt. Door met deze gegevens je kleuren verdelen over de onderdelen kun je dan prima #FFF aanhouden omdat bijna niemand boven de "5% op een bepaalt onderdeel uitkomt, en er dus bijna nooit een slecht leesbare combi is.

Dan hoef je niet aan de slag met aangepaste tekst kleur per onderdeel en is het beeld ook rustiger, dan dat je met verschillende tekstkleuren gaat werken.

[ Voor 0% gewijzigd door hans3702 op 09-04-2019 21:52 . Reden: typo ( meer ==> met) ]

[crisp]

css mix-blend-mode is ook wel interessant: https://css-tricks.com/methods-contrasting-text-backgrounds/

[ACM]

hans3702 schreef op dinsdag 9 april 2019 @ 21:03:
Een kronkel voor kleuren kiezen, mogelijk eens een scripje laten lopen om te kijken welke onderdelen wel een % en geen % in de taart punt krijgen. Mijn vermoeden is dat je bij minder dan 5% geen waarde te zien krijgt in de taartpunt. Door met deze gegevens je kleuren verdelen over de onderdelen kun je dan prima #FFF aanhouden omdat bijna niemand boven de "5% op een bepaalt onderdeel uitkomt, en er dus bijna nooit een slecht leesbare combi is.

Helaas, zo simpel is het niet Het is effectief de top 7, ongeacht hoe groot die top-elementen precies zijn.

Er is voor bijna elk type wel iemand die daar dan relatief veel in heeft gedaan... Dus ik pas liever dynamisch de tekstkleur aan, aan de achtergrond.

crisp schreef op dinsdag 9 april 2019 @ 21:35:
css mix-blend-mode is ook wel interessant: https://css-tricks.com/methods-contrasting-text-backgrounds/

Ik krijg dat niet werkend met de background-clip variant op die svg's text fill. Althans, dan wordt de tekst gewoon altijd zwart lijkt het bij een witte fill. En de mix-blend-mode werkt niet met een zwarte kleur (althans, de tekst verdwijnt dan andere opties dan difference doen wel 'iets'), wel met wit. Maar dan wordt het alsnog onleesbaar op kleuren die relatief dicht bij 50% grijs zitten (wit verandert dan in grijs dat er veel op lijkt).

Dit is in ieder geval niet beter

Cascading Stylesheet:

#karmaDistributionGraph .c3-chart-arc text {
    fill: white;
    mix-blend-mode: difference;
}

Deze gebruiker heeft wel een aardige mix van donkere en lichte kleuren in zijn grafiek: databoy

[hans3702]

Na de diverse opties bekeken en overdacht te hebben

Bij percentages onder tussen de 5 en 10 % past het vaak niet in de punt is ook afhankelijk hoeveel kleinere punten er nog achteraan komen wat de hoek van de punt bepaalt ( er zijn altijd uitzondering hier op te vinden / bedenken)

Kronkels zijn:

• afronden naar integers spaart een , en een digit.
• % teken evt in een kleiner font zetten wel weer een span voor nodig dus veel code voor 1 teken.

Maar grote stappen snel thuis kan ook

Geen percentage meer in de taart maar aan de legenda er onder toevoegen en bij hover zie je het ook.
Ik ga voor mij zelf voor de volgende CSS, dat vind ik uiteindelijk beter dan: onleesbaar en tekst die over meerdere taartpunten staat ( in voorbeeld van Databoy zelfs over 4)

Cascading Stylesheet:

#karmaDistributionGraph .c3-chart-arc text {
   display:none;
}

Dank voor alle reacties

ps: Het Pareto-principe is zo gek nog niet (80-20 regel)

[ Voor 3% gewijzigd door hans3702 op 10-04-2019 08:57 ]

[ACM]

Ik heb ondertussen die functie vanuit Stack Overflow verwerkt, zodat het in ieder geval een goed contrast krijgt

Dat het soms over meerdere taartpunten staat is inderdaad wat lelijk, maar ga ik voorlopig niet aanpassen.

[hans3702]

Bonus, niet over kleur maar wel over het zelfde object

z-index / transparantie




PS die grafieken zitten technische wel heel leuk in elkaar.

[ Voor 10% gewijzigd door hans3702 op 10-04-2019 16:36 . Reden: + ps ]