The "MicroColors" Web app

Open the app in a new tab
Then drag to a new window and re-size as you like.
(Updated 7/26/2022)

Why "Micro"? After several earlier versions of this app, a low-vision colleague of mine asked for a color-picker that would work on his screen without overflow in either width or height. Here's the catch: he uses a 27" iMac, with screen resolution reduced to 1600px × 900px — then enlarges the page to 500%! (in Chrome, the only browser to go that high). After meeting that requirement, I realized that the same footprint, with minimal enlargement, would fit nicely in a corner of my own screen for handy reference in development work. So after adding a number of features that I wanted for personal use, here it is.

Main screen

Settings: Any settings that you change—tooltips, sliders, HSL/RGB, preset colors, etc.—are saved in local storage (not "cookies") of the browser that you are using, and restored when the page is reloaded. All modern browsers appear to support this; however, you may have to consult the browser's documentation to make sure that settings will permit it to be used.

Shortcut keys: "?" will bring up the info/settings screen, "&" will bring up the save/replace screen, "esc" will close/cancel either one.
Toggles: "^" (shift-6) will reverse the displayed colors (regardless of Reverse button visibility), "%" will turn tooltps on/off, and "$" will change between 2-line and 3-line inputs. Keys c or C will toggle the Presets/Vision button on the Color line.
Inputs: Except when focus is on either of the hex inputs, h,s,l,r,g,b,x will set focus directly on the inputs for background hue, saturation, light, red, green, blue, hex. The same keys in upper case (shift+key) will do the same for text inputs. Any intermediate tab selection (for example HSL/RGB) will be done automatically.
Also available: a text listing of these keys. (new tab)

First line:

• [?] button: brings up information and settings screen, described below.
• Contrast box (read only): Luminance ratio between text and background, computed according to method specified. Color coded with green = good for all text; yellow = okay for large text; red = bad for any text. Colors for APCA based on normal text.
• Method selection dropdown:
  • WCAG ¶1.4.6: the current standard (v.2.1) of the W3C's Web Content Accessibility Guidelines.
  • APCA (draft): outdated here; under consideration for WCAG-3. Check the latest proposal with Andrew Somers' page

Color line (Vision controls):

• [Presets] button: changes line to that set of controls.
• [Reverse] button: reverses display colors as visually shown.
• Vision dropdown:
  • Normal vision
  • Greyscale version maintains contrast ratio of colors.
  • Three medical conditions simulate red, green, blue color blindness.

Color line (Preset controls):

• [Vision] button: changes line back to that set of controls.
• [A]–[L] buttons: select preset color combinations. Tooltips identify the buttons; see Shortcut keys above and Control line below to show or hide tooltips.
• [+] button: cycles through three sets of four preset color buttons.
• [Save] button: brings up screen to replace any preset colors with those currently shown in the display area.

Display area: shows current text and background colors.

Hexidecimal control line:

• 2 "#" boxes (inoperative): these simply identify hex inputs & colors for text (left) and background (right).
• 2 text inputs: enter 3 or 6 hex characters, upper or lower case, without the leading "#".
• 2 [!] buttons: Set color to the hex value that you've entered in the text box.
• [HSL] [RGB] buttons: toggle inputs (in area below) to control hue, saturation, light or red, green, blue.

Color control input area: select 2-line or 3-line view with "Sldrs: [On] [Off]" buttons on settings screen.

• Two lines: text and background number inputs for selected HSL or RGB model.
• Three lines: toggle [Text] [Bkgd] for range (slider) inputs plus numbers, in selected HSL or RGB.

Information/Settings screen

Control line:

• [Close] button; the [esc] key will also close this screen.
• Tips: [On] [Off] buttons: if On, tooltips will appear on mouseover or focus to explain some of the page elements.
• Sldrs: [On] [Off] buttons: set view of color control input area (see above).

Information area: key points about the app.

Save/Replace Preset screen

• [Cancel] button: active until [Save] is clicked; [esc] key also cancels this screen.
• [A]–[L] buttons: select where to save current colors. When focused, that button's tooltip text is displayed; when clicked, it is focused for editing.
• Unlabeled (but titled) text box: tooltip description for the selected button.
• [Save] button: shows current colors; completes the operation and closes the screen.

Testing

This app has been tested with macOS 10.13.6 in Firefox 78.0.2, Opera 68.0.3618.173, Chrome 83.0.4103.116, and Safari 13.1.1; with macOS 10.15.4 in Firefox 78.0.2 and Chrome 83.0.4103.116; with Windows 10 in Edge 83.0.478.61, Chrome 83.0.4103.116 and Firefox 78.0.2. It actually works (awkwardly) on iOS 13.5.1 in Safari, but is not designed for mobile device use.