The focus rectangle says, “I’m not orange. I’m just drawn that way.”

Raymond Chen

A customer saw that the Draw­Focus­Rect function was drawing an orange focus rectangle when applied to highlighted text. Whose bright idea was it for the focus rectangle to be orange?

The focus rectangle says, “I’m not orange. I’m just drawn that way.”

The focus rectangle is drawn by performing an XOR operation with a checkerboard brush. The idea behind using an XOR brush was that you could erase the focus rectangle by drawing it again. And the checkerboard brush means that both horizontal and vertical lines are dotted, and the corners match.

Rewind back to 1983. Most computer screens were monochrome. Bitmaps were one bit per pixel. And screens were 96 DPI.

In this world, XOR is a perfectly reasonable thing to do, since it looks good against both white¹ and black backgrounds.

A simple pattern of alternating white and black pixels gets you the dotted-line effect.

Of course, weird things happened if the focus rectangle was drawn against a non-solid background, but given the limitations of the hardware, you didn’t really have too much choice.

Fast-forward to the days of high-density 32-bit-per-pixel displays. That simple algorithm doesn’t produce results that are quite so pretty any more. For one thing, a single pixel dotted line is barely visible on high-density displays. And for another thing, XOR’ing colored pixels can produce strange effects.

In our case, what happened is that we took the blue color #0078D7 and flipped all the bits, producing #FF8728, which is bright orange.

That’s where the orange comes from. The focus rectangle doesn’t draw orange. It just flips the pixels that are already there, and blue flips to orange.

The Draw­Focus­Rect function can’t do anything about the XOR brush, because that would break compatibility with code that used a second Draw­Focus­Rect to erase the focus rectangle. But at least it can do a little bit to help with the dotted rectangle: The thickness of the dotted rectangle is controlled by an accessibility setting. In Control Panel, under Ease of Access, Make the computer easier to see, you can check “Make the focus rectangle thicker”, which makes the focus rectangle two pixels thick instead of just being a dotted line.

Programs which draw their own focus indicators can match the accessibility setting by using the SPI_GET­FOCUS­BORDER­WIDTH and SPI_GET­FOCUS­BORDER­HEIGHT system metrics.

Bonus chatter: The blinking line that indicates where typing will be inserted is called the caret, and it too is drawn by XOR. This works fine when the caret is against a white or black background, but again, if it’s against a colored background, things can get a little weird.

¹ Or, more likely, P1 phosphor green and black, or P3 phosphor amber and black.