An Accessible High Contrast Mode

src/blocks.js

@@ -2811,7 +2811,7 @@ SyntaxElementMorph.prototype.showBubble = function (value, exportPic, target) {
             scroller.color = new Color(0, 0, 0, 0);
             morphToShow = scroller;
         }
-        
+
         // support exporting text / numbers directly from result bubbles:
         morphToShow.userMenu = function () {
             var menu = new MenuMorph(this);
@@ -5509,8 +5509,13 @@ BlockMorph.prototype.render = function (ctx) {
     this.cachedClrDark = this.dark();
 
     if (MorphicPreferences.isFlat) {
+        let outlineColor = this.cachedClrDark;
+        // In high contrast mode, use white for the outline, which works only for dark mode.
+        if (IDE_Morph.prototype.isHighContrastTheme) {
+            outlineColor = WHITE;
+        }
         // draw the outline
-        ctx.fillStyle = this.cachedClrDark;
+        ctx.fillStyle = outlineColor;
         ctx.beginPath();
         this.outlinePath(ctx, 0);
         ctx.closePath();
@@ -5519,7 +5524,7 @@ BlockMorph.prototype.render = function (ctx) {
         // draw the inner filled shaped
         ctx.fillStyle = this.cachedClr;
         ctx.beginPath();
-        this.outlinePath(ctx, this.flatEdge);
+        this.outlinePath(ctx, 1);
         ctx.closePath();
         ctx.fill();
     } else {
@@ -5795,6 +5800,7 @@ BlockMorph.prototype.fixBlockColor = function (nearestBlock, isForced) {
     }
 };
 
+// TODO-a11y: Default to black color which meets all contrast requirements.
 BlockMorph.prototype.forceNormalColoring = function () {
     var clr = SpriteMorph.prototype.blockColorFor(this.category);
     this.setColor(clr);
@@ -5822,12 +5828,14 @@ BlockMorph.prototype.alternateBlockColor = function () {
     this.fixChildrensBlockColor(true); // has issues if not forced
 };
 
+// TODO-a11y: Consider whether this needs adapted.
 BlockMorph.prototype.ghost = function () {
     this.setColor(
         SpriteMorph.prototype.blockColorFor(this.category).lighter(35)
     );
 };
 
+// TODO-a11y: Default to black color which meets all contrast requirements.
 BlockMorph.prototype.fixLabelColor = function () {
     if (this.zebraContrast > 0 && this.category) {
         var clr = SpriteMorph.prototype.blockColorFor(this.category);
@@ -6441,7 +6449,7 @@ BlockMorph.prototype.rewind = function (scriptOnly = false) {
 
     return trace;
 };
- 
+
  BlockMorph.prototype.getVarName = function () {
     // return the name of the (first) variable accessed by this block or null
     // if it doesn't access any variable.
@@ -6458,9 +6466,9 @@ BlockMorph.prototype.rewind = function (scriptOnly = false) {
     }
     return null;
  };
- 
+
  // BlockMorph - editing as custom block
- 
+
 BlockMorph.prototype.editPrimitive = function () {
     var info = SpriteMorph.prototype.blocks[this.selector],
         rcvr = this.scriptTarget(),
@@ -6476,7 +6484,7 @@ BlockMorph.prototype.editPrimitive = function () {
     editor.popUp();
     editor.changed();
 };
- 
+
 // CommandBlockMorph ///////////////////////////////////////////////////
 
 /*
@@ -12674,6 +12682,7 @@ InputSlotMorph.prototype.render = function (ctx) {
             this.width() - this.edge * 2,
             this.height() - this.edge * 2
         );
+        // TODO-a11y: Consider drawing a border
         if (!MorphicPreferences.isFlat) {
             this.drawRectBorder(ctx);
         }
@@ -14884,7 +14893,7 @@ MultiArgMorph.prototype.insertNewInputBefore = function (anInput, contents) {
         block = this.parentThatIsA(BlockMorph),
         sprite = block.scriptTarget(),
         infix;
-    
+
     if (this.maxInputs && (this.inputs().length >= this.maxInputs)) {
         return;
     }

src/byob.js

@@ -2096,7 +2096,7 @@ CustomCommandBlockMorph.prototype.moveInPalette = function (dir = 'up') {
         ide.flushPaletteCache();
         ide.refreshEmptyCategories();
         ide.refreshPalette();
-    }    
+    }
 };
 
 CustomCommandBlockMorph.prototype.exportBlockDefinition = function () {
@@ -2151,7 +2151,7 @@ CustomCommandBlockMorph.prototype.duplicateBlockDefinition = function () {
     if (exp instanceof BlockMorph) {
         rebindRecursiveCalls(exp);
     }
- 
+
 
     ide.flushPaletteCache();
     ide.refreshPalette();