1.12026-10-31BUILD 1884
Can someone read this
- A contrast window, 濃淡 Nōtan (Window › Contrast, ⇧⌘C). Send two colors and read one as text on the other as its ground, in words you can type, at the size, weight and face you set. The WCAG 2.2 ratio is graded for that type: AA and AAA for normal and large text, and 3:1 for interface parts. The ratio is written cut, never rounded, so 4.496 shows as 4.49 and nothing rounds into a pass. Beside the grades, What It Means says in plain words what your text is classified as and what it passes.
- Reach finds the smallest change that gets the pair to a target, moving lightness only so the hue stays: lighten or darken the text, or the ground, or take a color already to hand, each with its cost shown and the smallest marked. Apply puts the new color in the pair, adds it to a palette, or replaces the palette’s own swatch in one undoable edit. A lightness slider under each color does the same by hand, with marks where 3:1, 4.5:1 and 7:1 fall.
- The Matrix grades every pair among ten colors at once, each cell the pair itself with its figure and grade beneath. Sort it dark to light, drag rows into any order, turn it round with AS GROUNDS to read the rows as grounds under the columns’ text, hover a cell for what that pair is worth for the type set, and click one to open it. The window holds up to thirty-two colors and the Matrix shows the first ten; with more held, click a row’s color and choose Replace With to see the colors the Matrix is not showing, and the one you pick takes that row’s place. Palette › Send All to Contrast (⌥⇧⌘C) sends a whole palette.
- The Ladder is the third view, for the other question: not which of these work on which, but which of these inks can be read on this ground, or which grounds carry this ink. One color is fixed, chosen from the ladder’s own heading, and every other color held is read against it as a list, each rung the pair as a block with its ratio and grade mark. AS GROUNDS turns the question round, the sort runs either way, and a click on a rung opens that pair. Pair, Matrix and Ladder are ⌘1, ⌘2 and ⌘3, and ⌃⌘S swaps the text and the ground in any of them.
- Getting colors there. Press C over any swatch, choose Send to Contrast from a right-click menu, drag a swatch or a hex into the window, or click the WCAG figure that now sits between every two colors on the Bench. The window keeps its colors through a close, counts the ones in no open palette, and under each names the Library palettes that already hold it.
See it as a color-blind reader does
- View › Vision draws the front window as a protanope, deuteranope, tritanope or achromat sees it, in any palette window, the Bench or Contrast, so a red and a green that collapse into one brown show themselves before a reader finds them. The figures do not change; it is a way of looking, and the window says so while it is on.
Your colors, by name
- Name your own colors. Double-click a swatch’s name and type. The name goes into the file with Save, into every export and code format, and onto the Bench and into Contrast with the color. The nearest name from the list stands in wherever you have not given one, as before.
- A stylesheet opens as a palette. Drop a CSS, SCSS, Sass or Less file on a window, or paste a :root block, and its colors arrive one swatch each, named after their variables. Hex, rgb(), hsl(), oklch(), lab(), lch(), color() and the CSS color names are all read; anything computed is left alone. A palette exported as CSS comes back with its names, so a sheet goes in and comes out under them. A watched folder can include its stylesheets, so a client’s brand sheet sits in the Library beside its palettes.
- Two more code formats: CSS Variable writes the declaration, --brand-ink: #1B263B;, and CSS var() the reference. Forty-three in all.
Colors between windows
- Drag a swatch onto another palette and it is added where it lands; hold ⌘ to move it instead. The cursor says which before you let go. Colors drag off the Bench and out of Contrast onto any palette, and onto the Bench from anywhere; a dropped color arrives as a closed row, brought into view.
- Drag a color into a harmony and it seeds it: the first seed, a ramp’s last, or the seed under the band it lands on.
- A Square harmony joins the seven, two complementary pairs at right angles. A harmony’s two colors are its seeds in every menu, and setting a seed can be undone.
The Palette Library
- Find a palette by a color in it. Type a hex, paste a color in any code format, or drop a swatch on the search, and the list narrows to the palettes that hold it, nearest first, with the matching swatch marked and its distance shown. A MATCH strip chooses Exact, Close or Same Hue. Search by a swatch’s name too, so “Cool Black” finds the palette that has it.
- Tiles. A switch in the footer, or View › Tiles, draws every palette as a square of its colors; a click opens its details in a pane beneath, a double-click loads it, and the arrow keys walk the grid.
- Housekeeping. Folders fold shut by a chevron on their headings. The search has the keyboard whenever the window opens. Duplicate asks for the copy’s name and never writes over a palette. One of the app’s own color lists can go to the Trash, with Put Back in the toast; a watched folder’s files are never touched. Installing a list asks before anything is written over, and the Library comes back where you left it.
The Bench
- The WCAG ratio in every gutter, under ΔE, with a mark for how far the pair has got, and larger figures that can be read. The Bench reads the vision you have set, counts the colors no open palette holds, and keeps a mix glyph between every pair however many it holds. A mix added to a palette closes its well. Editing a staged or mixed color can be undone, and a column keeps its name when its palette is replaced.
From the keyboard
- The whole card. ↑ and ↓ walk the open card to the swatch above or below, Home and End to the ends, ⏎ names the open one, A opens its sliders, S steps the color space, W swaps spectrum and wheel, ⎋ or Space closes it and keeps your place for the next ↑ or ↓, and Tab reaches every control. New Color (⌥⌘N) adds a swatch ready to type.
- A harmony’s bands answer the same keys. ↑ and ↓ walk the bands, the one above or below opening as this one closes, Home and End go to the ends, ⎋ or Space closes the open band and keeps your place, and B, C, T and A reach an open band as they reach a closed one. While a card is open, in a palette or a harmony, a bare key means the card; the color under the pointer is read only with none open.
- The Bench, the Library and Contrast each have a menu in the menu bar and keys of their own: on the Bench ← → walk the colors, M mixes, B keeps a mix, ⌫ removes; in the Library ↑ ↓ walk the rows, ⏎ loads, ⌘F finds from anywhere; in Contrast ⌘= and ⌘− size the type, ⌃⌘S swaps text and ground, ⌘1 ⌘2 ⌘3 choose the view, and Tab reaches the specimen and the figures. B, C, T and ⌫ work over every surface a window draws its colors on. The shortcuts sheet (⌘/) has a tab for each window.
Windows and the Mac
- Toasts you can read. The app’s replies sit in a strip above the footer of the window you are in, stay as long as their words take, hold under the pointer, and carry Undo where there is something to undo.
- Windows stay where you put them. The Library and Contrast come back where they were left; a window that lands off the screen comes back on; Bring All to Front is on the Dock icon’s menu; the Window menu names each window by its palette. One palette open in several windows stays one palette when you save, and two palettes of one name are told apart in every list.
- A Largest type size (1.3×) joins Default and Larger. Settings › General chooses what a transparent color is drawn over: the checkerboard, the window’s ground, white, black, a color of your own, or all of them in strips.
- Direct download: the license can arrive as a file. Double-click a .suisailicense attachment, or drop it on the registration screen.
Smaller things, and fixes
- Every Add to Palette menu shows a strip of each palette’s colors.
- ⌘K clears the window in front, where it used to clear the Bench from anywhere; Contrast asks first if a color in no palette would be lost.
- The menu bar item’s recents go into a palette at once when the available option is clicked.
- A click on an open swatch copies exactly the string COPIES AS shows.
- The enlarged picture zooms in smaller steps, and the pane’s 10% is a tenth.
- Saving a translucent color to ASE or GPL, which hold no alpha, says so. Save on closing writes the palette back to its own file in its own kind, where it installed a color list instead.
- CSS exports write single-word names in lowercase, and CSS alpha under Use Fraction Numbers is a decimal that a browser reads; the app reads its own fraction forms back.
- Reading a stylesheet is many times faster, rescans run off the main thread, selectors such as .red are no longer taken for colors, and a sheet past a megabyte is left unread.
- The card’s sliders no longer drag the swatch out of the window, and the spectrum’s crosshair can be picked up at an edge.
- Opening and closing a swatch’s card, or a harmony’s band, moves as one piece, card, rows and color spine together; walking the list from the keyboard no longer jerks it, and the motion honors Reduce Motion.
- The Bench no longer fights its own height when a mix is opened, and no window comes back with its header pushed down or its footer drawn up after a night open or a sleep.
- Typing in the contrast specimen draws every line whole, and selected words show as the pair inverted rather than in a color that hides them.
- VoiceOver: defined terms open their definitions, sort buttons say which way they sort, and the specimen’s editor says what it is.