Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Diversity/Inclusiveness in Roll Results

Hi Team, I had a player last night report that they can't see the difference between regular rolls, critical successes or critical failures in roll results - They are red/green colorblind so if they roll a 1, a 20, or something in between, everything looks the same.  So this is somewhere halfway between a bug report and a suggestion/tip.  I'm putting it here because I feel like the even though I'm proposing a change, the roll announcements are a core feature and deserve to be accessible to everyone. "The Best" (maybe?) solution is to let players customize the color for these highlights.  There are different types of colorblindness so different users may have different needs. "The quick" solution is to tweak the existing color values slightly.  I'm not an expert in the area but my (basic) understanding is that the most prominent forms of colorblindness can be mitigated by selecting colors that have a different "vividness" or contrast so that even if the hue can't be discerned the user can still figure out which is which by how much they "pop" on screen.  As an example, we use the Combat Master script, and the current/next indicators are different enough that he can tell which is which: I'm not advocating for these colors particularly (unless maybe someone more knowledgeable than me can provide more guidance) - they work for him but it seems to me like they're still pretty similar and there may be other users who can't tell these two apart.  I'd hate to fix something for my player and break it for someone else. Another idea is to introduce a graphical decoration to critical successes / critical failures in addition to (or instead of) the color highlights - it doesn't necessarily even need to involve an artist, I'm certain there are already suitable emoji that could be leveraged for this. So, there's 3 ways to address the problem.  I hope you will consider applying at least one of them.  Thanks!
1610077771
Gold
Forum Champion
I could see how that (with the colors) would be helpful for accessibility. Since you're a PRO user, you can use API script, with I think maybe it's called a Roll Listener, anyway with such an API script you can have it add something extra like words or symbol after a "1" or a "20". Here is one such API script, that I have on-hand, I hope it's ok with The Aaron for me to post this here, since this is not found in the One-Click API's, you would go to your New Script, paste this in, save with title such as AnnounceRolls.js You'll find within the code the place where you can change what it says on 1 or 20. // Github:&nbsp; &nbsp;<a href="https://github.com/shdwjk/Roll20API/" rel="nofollow">https://github.com/shdwjk/Roll20API/</a> // By:&nbsp; &nbsp; &nbsp; &nbsp;The Aaron, Arcane Scriptomancer // Contact:&nbsp; <a href="https://app.roll20.net/users/104025/the-aaron" rel="nofollow">https://app.roll20.net/users/104025/the-aaron</a> var AnnounceRoll = AnnounceRoll || (function() { &nbsp; &nbsp; 'use strict'; &nbsp; &nbsp; var version = '0.2.1', &nbsp; &nbsp; &nbsp; &nbsp; lastUpdate = 1427604233, &nbsp; &nbsp; checkInstall = function() {&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; log('-=&gt; AnnounceRoll v'+version+' &lt;=-&nbsp; ['+(new Date(lastUpdate*1000))+']'); &nbsp; &nbsp; }, &nbsp; &nbsp; handleInput = function(msg) { &nbsp; &nbsp; &nbsp; &nbsp; var rolldata,out=[]; &nbsp; &nbsp; &nbsp; &nbsp; if (msg.type !== "rollresult") { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; rolldata = JSON.parse(msg.content); &nbsp; &nbsp; &nbsp; &nbsp; _.each(rolldata.rolls,function(r){ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if('R' === r.type &amp;&amp; 20 === r.sides) { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _.each(r.results, function(roll){ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; switch(roll.v) { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 1: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; out.push('&lt;div style="color: #009900;font-weight: bold"&gt;Natural 1.. What happens? (Narrative)&lt;/div&gt;'); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 20: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; out.push('&lt;div style="color: #009900;font-weight: bold"&gt;NATURAL 20! (Narrative opportunity)&lt;/div&gt;'); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp; &nbsp; if(out.length) { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sendChat('',out.join('')); &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; }, &nbsp; &nbsp; registerEventHandlers = function() { &nbsp; &nbsp; &nbsp; &nbsp; on('chat:message', handleInput); &nbsp; &nbsp; }; &nbsp; &nbsp; return { &nbsp; &nbsp; &nbsp; &nbsp; CheckInstall: checkInstall, &nbsp; &nbsp; &nbsp; &nbsp; RegisterEventHandlers: registerEventHandlers &nbsp; &nbsp; }; }()); on('ready',function() { &nbsp; &nbsp; 'use strict'; &nbsp; &nbsp; AnnounceRoll.CheckInstall(); &nbsp; &nbsp; AnnounceRoll.RegisterEventHandlers(); });
1610082708

Edited 1610082718
Oosh
Sheet Author
API Scripter
There's also a post here showing the classes you can edit with Stylus to change all the chat colours to whatever you like. This only makes changes to the user's own browser instance, so the player needs to install it and modify it themselves, but they can fully customise just about every element outside the canvas.
Gold said: I could see how that (with the colors) would be helpful for accessibility. Since you're a PRO user, you can use API script, with I think maybe it's called a Roll Listener, anyway with such an API script you can have it add something extra like words or symbol after a "1" or a "20". Here is one such API script, that I have on-hand, I hope it's ok with The Aaron for me to post this here, since this is not found in the One-Click API's, you would go to your New Script, paste this in, save with title such as AnnounceRolls.js You'll find within the code the place where you can change what it says on 1 or 20. // Github:&nbsp; &nbsp;<a href="https://github.com/shdwjk/Roll20API/" rel="nofollow">https://github.com/shdwjk/Roll20API/</a> // By:&nbsp; &nbsp; &nbsp; &nbsp;The Aaron, Arcane Scriptomancer // Contact:&nbsp; <a href="https://app.roll20.net/users/104025/the-aaron" rel="nofollow">https://app.roll20.net/users/104025/the-aaron</a> var AnnounceRoll = AnnounceRoll || (function() { &nbsp; &nbsp; 'use strict'; &nbsp; &nbsp; var version = '0.2.1', &nbsp; &nbsp; &nbsp; &nbsp; lastUpdate = 1427604233, &nbsp; &nbsp; checkInstall = function() {&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; log('-=&gt; AnnounceRoll v'+version+' &lt;=-&nbsp; ['+(new Date(lastUpdate*1000))+']'); &nbsp; &nbsp; }, &nbsp; &nbsp; handleInput = function(msg) { &nbsp; &nbsp; &nbsp; &nbsp; var rolldata,out=[]; &nbsp; &nbsp; &nbsp; &nbsp; if (msg.type !== "rollresult") { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; rolldata = JSON.parse(msg.content); &nbsp; &nbsp; &nbsp; &nbsp; _.each(rolldata.rolls,function(r){ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if('R' === r.type &amp;&amp; 20 === r.sides) { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _.each(r.results, function(roll){ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; switch(roll.v) { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 1: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; out.push('&lt;div style="color: #009900;font-weight: bold"&gt;Natural 1.. What happens? (Narrative)&lt;/div&gt;'); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 20: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; out.push('&lt;div style="color: #009900;font-weight: bold"&gt;NATURAL 20! (Narrative opportunity)&lt;/div&gt;'); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp; &nbsp; if(out.length) { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sendChat('',out.join('')); &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; }, &nbsp; &nbsp; registerEventHandlers = function() { &nbsp; &nbsp; &nbsp; &nbsp; on('chat:message', handleInput); &nbsp; &nbsp; }; &nbsp; &nbsp; return { &nbsp; &nbsp; &nbsp; &nbsp; CheckInstall: checkInstall, &nbsp; &nbsp; &nbsp; &nbsp; RegisterEventHandlers: registerEventHandlers &nbsp; &nbsp; }; }()); on('ready',function() { &nbsp; &nbsp; 'use strict'; &nbsp; &nbsp; AnnounceRoll.CheckInstall(); &nbsp; &nbsp; AnnounceRoll.RegisterEventHandlers(); }); Oosh said: There's also a post here showing the classes you can edit with Stylus to change all the chat colours to whatever you like. This only makes changes to the user's own browser instance, so the player needs to install it and modify it themselves, but they can fully customise just about every element outside the canvas. Thanks Gold and Oosh!&nbsp; I probably will implement something like Gold's snippet in the meantime.&nbsp; But I would also say that the current situation just isn't acceptable.&nbsp; Yes, I'm a "PRO user" so&nbsp; have the power to "fix this" - for my players. What I'm trying to advocate for is:&nbsp; it's a (relatively) simple adjustment.....the VTT platform should be accessible to all users, out-of-the-box.&nbsp; Without depending on someone in a particular gaming group buying into a subscription.&nbsp; I don't think this is malicious on Roll20's part, I just want to surface the issue so that the right decision-maker can sign off on it. I outlined a few possible solutions, the least-effort of which is literally just adding a few bytes to display a Unicode glyph next to the highlighted min/max rolls.&nbsp; I'm not familiar with the backend codebase specifically, but I don't work here.&nbsp; Someone on the team has the familiarity to say, "D'oh, what an easy way to improve the user experience!&nbsp; This will take me about 20 minutes (including brewing a new pot of coffee)".&nbsp; If the code is anything like those I've managed, the biggest time cost will be picking which icon to use.